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”元素似乎超出了“.progressbar”容器的圓角。

答：

是的，此行為是設計意圖的。

說明：

根據 CSS 規範，元素的預設溢位屬性是「visible」。這意味著內容不會被剪裁並且可能呈現在容器之外。 “border-radius”屬性會裁剪容器的背景，但如果將 Overflow 屬性設為“visible”，則內容不會受到影響。

背景裁剪的 CSS 規範指出「其他效果」剪輯到邊框或填充邊緣（例如「溢出」而不是「可見」）也必須剪輯到曲線。 」這意味著，如果溢出設定為「可見」以外的任何值，則內容將被剪切在容器的圓角內。

因此，為了確保內容保留在圓角內，有必要將容器的溢出屬性設定為“隱藏”、“滾動”或其他非“可見”值。圓角內。

以上是Border-Radius 會剪切內容還是僅剪切背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！