滾動元素上的border-radius

Question

當你有一個帶有邊界半徑的可滾動div時，孩子們會使用eclipse或者不尊重這個邊界半徑。例如下面是該問題的一個小提琴：

http://jsfiddle.net/Thatguyhampton/E9dmr/2/

.scrollable { 
    overflow: auto; 
    overflow-y: overlay; 
    -webkit-overflow-scrolling: touch; 
    -webkit-transform: translate3d(0, 0, 0); 
    height: 400px; 
    width: 200px; 
    background-color: blue; 
    border-radius : .5em; 
} 

.content { 
    height: 500px; 
    width: 200px; 
} 

.content-top { 
    position :absolute; 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
} 

紅色區域顯示尖角，而不是圓形的人父。有沒有辦法解決？

Answer 1

DEMO JS FIDDLE

.content-top { 
    /*position :absolute;*/ 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
} 

注出 '的位置是：絕對' 的。內容頂元件上解決該問題。

Answer 2

Fixed DEMO Example

紅色元素沒有邊界半徑和走在盤旋半徑滾動元素（藍色）。邊界半徑不會裁剪！ （僅邊框半徑）

解決問題： 您可以將紅色元素的border-radius添加到左上角。

.content-top { 
    border-top-left-radius : .5em; 
} 

Answer 3

改變這一行這樣DEMO：

.content-top { 
    position :absolute; 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
    -webkit-border-top-left-radius: 3px; 
-webkit-border-top-right-radius: 3px; 
-moz-border-radius-topleft: 3px; 
-moz-border-radius-topright: 3px; 
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 
} 

Answer 4

.scrollable { 
    overflow: auto; 
    overflow-y: overlay; 
    -webkit-overflow-scrolling: touch; 
    -webkit-transform: translate3d(0, 0, 0); 
    height: 400px; 
    width: 200px; 
    background-color: blue; 
    border-radius : .5em; 
} 

.content { 
    height: 400px; 
    width: 200px; 
} 

.content-top { 
    /*position :absolute;*/ 
    top: 0; 
    height: 50px; 
    width : 200px; 
    background-color: red; 
}