有關CSS的overflow和border-radius的那些事，你的圓角被覆蓋了嗎？

事件原由

最初是網友的一個提問，來自於個人知識星球社區：

 

說實話，不得不佩服這個網友的眼力，這麼小的細節都能發現。不過這也正是 FineUI 一直前進的動力，來自社區的監督和促進。

 

從截圖上看，貌似圓角部分被內部節點覆蓋了。換句話說：外部的圓角沒有截斷內部的元素！

 

因爲這位網友測試的是 Cupertino 主題，圓角只有 6px，不大明顯：

 

 

換成 Le Frog 主題，這個問題就更加突出了：

 

分析問題

對於這個問題，有幾種可選的解決辦法：

1. 去除窗體控件的圓角邊框，畢竟操做系統的窗體都是直角的，這個應該也無可厚非（只不過這個改動和以前不一致，確定會勾起部分用戶的不滿情緒）

2. 給內部節點元素也加上圓角邊框，防止內部節點的覆蓋父節點的圓角邊框

第二個方式卻是可行的方案，在瀏覽器調試工具中嘗試以下：

 

因爲外層節點 .f-panel 擁有 CSS 樣式類 f-corner-all：

.f-corner-all {
    border-radius: 6px;
}

這裏給內部的 .f-panel-header 增長一個樣式類 f-corner-top：

.f-corner-top {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

彷佛已經完美解決這個問題了。

 

其實否則，因爲窗體內部的結構比較複雜，好比存在底部工具欄的狀況（底部工具欄又可能有多個）：

 

所以，判斷哪一個元素位於最下面，是正文元素，仍是某個工具欄控件，就是一個麻煩事。

而且還存在用戶動態顯示隱藏工具欄的狀況，這就更增長了複雜度。

 

因此這個問題我遲遲沒有動手修改。

 

直到有一天，我忽然發現，同是 Cupertino 主題，下拉菜單的圓角邊框是正常的，不信你來看（單田芳說）：

 

解決問題

我彷佛看到了問題解決的但願，同一個主題，有個地方正常，有的地方不正常，是是否比較二者的差別了！

 

通過仔細對比，問題逐步浮出水面，卻原來下拉菜單有這麼個CSS屬性：

.f-menu {
    overflow: auto;
}

 

而窗體控件沒有定義 overflow 屬性，咱們看下瀏覽器缺省的 overflow 屬性：

 

 

原來，若是未定義 overflow 屬性，那麼節點的這個屬性默認值是 visible（有點出乎意料，我還覺得是 auto 呢）。

 

如今好了，既然比較出差別，應用這個改變便可（爲了便於觀察，咱們把 border-radius 改成 12px）：

 

問題解決！

 

小結

全部BUG都是如此，未解決以前看似洪水猛獸，找到根源以後倒是紙老虎。不過關鍵在於解決問題的方法和途徑，中間所歷經的過程纔是最寶貴的。

 

You are not along

這篇文章彷佛已經解決，可是到底爲何會這麼呢？

爲何 border-radius 和 overflow: auto（或者hidden）配合起來纔好使呢？

我相信大部分我能遇到的問題，別人已經遇到過並給出解決方案，不少時候咱們不能經過正確的檢索找到以前那個遇到相同問題的人。

不過此次我很幸運，找到了徹底相同的一篇文章：https://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content

分享在此：

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

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

As you can see I use border-radius on the container (.progressbar), but the content (.buffer) goes 'outside' the container. I'm seeing this on Google Chrome.

Is this the expected behavior?

P.S. This isn't about how to fix it, this is about whether it should work like this.

做者遇到相同的問題：容器定義了border-radius，可是內容仍是超出了容器的圓角定義。

最後，做者拋出了這個疑惑：這不是關於如何修正它，而是關於它是否應該像這樣工做的問題？

 

回答更精彩：

Yes, as crazy as it sounds, it actually is. Here's why:

The default overflow for <div> elements (and most other things) is visible, and the spec says this about overflow: http://www.w3.org/TR/CSS21/visufx.html

The overflow value of the box must be something other than visible (that means auto, hidden, scroll and others) in order for the corners to clip its children.

 

最終給出的結論：

爲了讓子節點不超出容器圓角邊框，容器的overflow屬性必須是除visible以外的其餘值（好比 auto, hidden, scroll...）