实际上圆角效果并没有真的消失，它只是被右侧的滑动条覆盖掉了。
这种情况下，div的右上角和右下角都会因为滚动条的存在而显示的是直角（视觉效果上）。
但其实div的四个角确实已经有了圆角的效果，但是滚动条属于div内部的元素，层级较高，所以将div的圆角遮挡住了。
那么我们解决这种情况的方法也很简单。
<style>
div {
width: 300px;
height: 100vh;
backgroud-color: #666666;
border-radius: 10px;
overflow: hidden;
overflow: scroll-y;
</style>
<ul></ul>
</div>
我们在原本需要滚动的盒子内部加上一层滚动元素，将滚动的效果放在内部的滚动元素上，父元素加上overflow: hidden;并在父元素设置圆角，就可以达到我们需要的效果。
原理还是避免overflow: scroll-y 和 border-radius 属性同时存在于同一个元素上，我们将圆角的效果提升一个层级（这里是设置在父元素上）。这样就能让圆角覆盖滚动条的效果。
同样的我们也可以在当前元素的外层加上圆角遮罩，最终效果同上。
另外我们还有另外一种方法，如果我们的滚动条可以不可见，那么就不存在覆盖的情况了。
这里我们需要控制滚动条的样式 ::-webkit-scrollbar
::-webkit-scrollbar {
display:none
同时可以控制滚动条的其他属性 scrollbar-width,scrollbar-color。
需要注意以上css方式的兼容性需要注意。
如有其他情况欢迎补充
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情”
