為什麼網頁設計中的內容超出圓角？

圓角和內容剪切：預期還是意外？

在網頁設計中，經常使用圓角（邊框半徑）希望創建具有視覺吸引力的佈局。然而，當內容似乎超出其容器的圓角邊緣時，就會出現一個令人費解的問題。

例證：

考慮以下HTML 和CSS：

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

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

在此範例中，類別為「progressbar」的div具有圓角，但是其中的div（“緩衝區”）似乎擺脫了這些限制，並延伸到彎曲邊緣之外。

真相揭曉：

令人驚訝的是，這種行為是由網頁瀏覽器設計。根據 CSS 規範，元素（包括 div）的預設溢位值為“visible”，這允許內容超出元素的邊框。

然而，「border-radius」屬性僅影響元素的背景，並且不會剪輯其內容。要將內容剪切到彎曲邊框，溢出值必須設定為“可見”以外的值，例如“隱藏”或“滾動”。

解決方案必殺技：

要解決此問題，只需將容器（“進度條”）的溢出屬性設為“隱藏”，如本修改後所示snippet:

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

這樣做，容器內的內容將正確地剪切到彎曲邊緣，為您提供所需的視覺效果。

以上是為什麼網頁設計中的內容超出圓角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！