Border-Radius 会剪切内容还是仅剪切背景？

边框半径裁剪：理解行为

问题：

元素的内容可以带有边框半径吗超出其边界？

提供示例：

考虑以下 HTML 和 CSS 代码：

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar {
    height: 5px;
    width: 100px;
    border-radius: 5px;
}

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

在此示例中，“.buffer”元素似乎延伸到了圆角之外“.进度条”

答案：

是的，此行为是有意设计的。

解释：

根据 CSS 规范，元素的默认溢出属性是“可见”。这意味着内容不会被剪裁并且可能会呈现在容器之外。 “border-radius”属性会裁剪容器的背景，但如果将 Overflow 属性设置为“visible”，则内容不会受到影响。

背景裁剪的 CSS 规范指出“其他效果”剪辑到边框或填充边缘（例如“溢出”而不是“可见”）也必须剪辑到曲线。”这意味着，如果溢出设置为“可见”以外的任何值，则内容将被剪切在容器的圆角内。

因此，为了确保内容保留在圆角内，有必要将容器的溢出属性设置为“隐藏”、“滚动”或其他非“可见”值。通过在此示例中将溢出设置为“隐藏”，“.buffer”元素将被剪切在“.progressbar”容器的圆角内。

以上是Border-Radius 会剪切内容还是仅剪切背景？的详细内容。更多信息请关注PHP中文网其他相关文章！