滾動元素上的邊界半徑

Question

如果您的滾動div帶有邊框半徑，則子級divs會黯淡或不遵守此邊框半徑。 例如，這是一個顯示問題的小提琴：

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

.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;
}

Answer 2

像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 3

固定的演示示例

紅色元素沒有邊框半徑，而是懸停在可滾動的半徑元素（藍色元素）上。 邊界半徑無法裁剪！ （僅邊界半徑）

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

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

Answer 4

演示JS FIDDLE

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

在.content-top元素上注釋掉“ position：absolute”可以解決該問題。