有关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...）