border-radius剪輯內容？

當容器有border-radius時，我的容器內容不應該被切斷嗎？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; }

正如你可以看到我的容器（.progressbar），but the content (.buffer) goes 'outside' the container上使用border-radius。我在Google Chrome上看到了這一點。

這是預期的行爲？

P.S.這不是關於如何解決它，這是關於它是否應該像這樣工作。

來源

2011-12-20 PeeHaa

jsFiddle死了。 – SquareCat 2012-11-18 13:44:22

@CummanderCheckov tnx通知我。讓我再次設置它。雖然所有的信息* *在我的問題（正是因爲這個原因），我已經更新它。 – PeeHaa 2012-11-18 14:04:00

這是預期的行爲？

是的，它聽起來很瘋狂，實際上是。這裏的原因：

默認overflow爲<div>元素（和大多數其他的東西）是visible和spec說，這大約overflow: visible：

可見
該值指示的內容不會被截斷，即，它可能在塊框外呈現。

反過來，§5.3 Corner clipping在背景和邊框模塊說：

一個框的背景，但不是它的邊界圖像，剪裁到合適的曲線（由「背景剪輯」確定）。 剪切到邊界或填充邊緣的其他效果（例如「可見」以外的「溢出」）也必須剪切到曲線。替換元素的內容總是被修剪爲內容邊緣曲線。此外，邊界邊緣曲線外的區域不接受代表元素的鼠標事件。

，我已經特別強調提到盒子的overflow值必須大於visible以外的東西（這意味着auto，hidden，scroll等），以便邊角裁剪其子的句子。

如果該框被定義爲有可見的溢出，就像我說的是大多數視覺元素的默認值，那麼內容不應該被截斷。這就是爲什麼.buffer的方角越過.progressbar的圓角。

因此，最簡單的方式來獲得.buffer內.progressbar的圓角裁剪是一個overflow: hidden樣式添加到.progressbar，如圖this updated fiddle。

來源

2011-12-20 21:37:02 BoltClock

太棒了！糟糕的問題（是的，我知道去問那些製作規格的人），但你能否想到爲什麼替換的元素會被截斷的原因？PS這是一個額外的問題:) – PeeHaa 2011-12-20 21:42:07

@PeeHaa：被取代的內容（例如，無論在「」中鏈接的圖像）都必須剪裁，因爲這些元素只能包含替換的內容。如果沒有，你將無法將'border-radius'應用於圖像等。 – BoltClock 2011-12-20 21:45:44

這個問題似乎指向同樣的缺陷，顯然這是一個錯誤。

CSS3 border-radius clipping issues

編輯

伊克！ BoltClock已經提到過這個問題，所以我會在這個主題上發佈這個其他的SO問題，同時我也在此尋找一個spec的報價。 How do I prevent an image from overflowing a rounded corner box with CSS3?

規格鏈接

僅供參考，我會堅持相關鏈接 - 但我找不到任何明確的給你給出的例子。

CSS Backgrounds - Rounded Corners

來源

2011-12-20 21:26:35 isNaN1247

這個問題的提問者錯誤地解釋了CSS3規範，並且引用的錯誤涉及「不可見」的「溢出」值，在這裏不是這種情況。 – BoltClock 2011-12-20 21:29:11

在我讀過的規範中：「被替換元素的內容總是被修剪爲內容邊緣曲線。」這意味着它應該切斷內容。或者我讀錯了：P – PeeHaa 2011-12-20 21:29:53

@PeeHaa：'div'不是被替換的元素，所以這一點是不相關的。 – BoltClock 2011-12-20 21:30:20

這是規範說什麼，所以這是應該的工作方式。但這並不意味着Chrome就是這樣做的。

5.3。 Corner Clipping

一個框的背景，但不是它的邊界圖像，被剪切到適當的曲線（由'background-clip'確定）。剪切到邊框或填充邊緣的其他效果（例如「可見」以外的「溢出」）也必須剪切到曲線上。替換元素的內容總是被修剪爲內容邊緣曲線。此外，邊界邊緣曲線外的區域不接受代表元素的鼠標事件。

http://www.w3.org/TR/css3-background/#border-radius

來源

2011-12-20 21:29:56 Filip

對於任何人想知道的修復將是什麼。最簡單的方法是編輯CSS。

在給定的，這將是一個合適的修復程序的例子：

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

來源

2011-12-20 21:36:48 Owen

從語義上來說，這是最好的一個簡單的邊界半徑繼承屬性添加到內格，因此新類加法：

.buffer { 
    border-radius: inherit; 
}

因此，對於別人的情況下，可以保留使用溢出：自動如果內容溢出你的frae，你想看到的一切。

來源

2014-07-10 08:20:36

我發現這對於某些不尊重'overflow：hidden'的內容非常有用 - 比設置border-radius更清潔孩子數量，我一直希望避免。 – Iiridayn 2016-03-18 19:53:31

這是不正確的。具有相同'border-radius'屬性的子內容有時不會覆蓋父背景。嘗試一下血紅的父母背景，你會看到它。 – Rockallite 2017-07-14 08:40:57

border-radius剪輯內容？

回答

相關問題