Chrome 上的弯曲边缘未出现溢出

Question

我已将列表的border-radius设置为6px，这在所有浏览器中都可以正常工作，但在 Chrome 中，top-right和bottom-right弯曲的边缘在设置时overflow隐藏。这只是Chrome渲染的方式吗？如果没有，我该如何解决此问题？

我的代码：

<div class="container">
<div class="list">
<div class="list-item">
Test 1
</div>
<div class="list-item">
Test 2
</div>
</div>
</div>

JSFiddle Demo

Answer 1

可能是 Chrome 中的错误。一种解决方法是使用 ：：-webkit-scrollbar 前缀自定义滚动条。此前缀在 Firefox 中被忽略，这会将您的滚动条呈现为默认值，半径保持不变。

小提琴

示例：

.container {
width: 300px;
}

.list {
overflow-x: hidden;
position: relative;
height: 300px;
border: 1px solid #000;
border-radius: 6px;
}

.list-item {
padding: 13px 0 7px;
}

::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 6px;
}

<div class="container">
<div class="list">
<div class="list-item">
Test 1
</div>
<div class="list-item">
Test 2
</div>
<div class="list-item">
Test 3
</div>
<div class="list-item">
Test 4
</div>
<div class="list-item">
Test 5
</div>
<div class="list-item">
Test 6
</div>
<div class="list-item">
Test 7
</div>
<div class="list-item">
Test 8
</div>
</div>
</div>