Question

我需要一些关于CSS 3问题的帮助......

问题是当我用boder-radius定义一个scrollBox然后我滚动到底部时，边框有一个剪裁问题。如果使用静态位置定义内容div，则没有问题，但我需要它对于翻译效果是相对的。

您可以尝试以下代码来查看我的意思：

<html>

<body>
    <div class="scrollBox" style="width:50%;height:100px;background:grey;border-radius:10px">
        <div class="content" style="height:100%;overflow:scroll">
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
        </div>

    </div>
</body>

</html>

希望我的问题确实存在解决方案。谢谢！

Answer 1

添加一点水平填充：.content { padding:0 10px;}

我认为border-radius只是围绕背景颜色的角落，它实际上并没有改变形状/剪辑块的角落。

Answer 2

边框半径实际上会剪切内容，而不仅仅是背景颜色。容器块overflow: hidden;

所需要的只是.scrollBox

CSS和border-radius问题

2 个答案: