html - 溢出 : hidden breaks border-radius

Question

我在处理容器 div、border-radius 和 overflow 时遇到问题。

(对于 hubspot 上的任何人，以下问题是如何将页脚内容移到容器 div 之外)

注意:我被困在 CMS 模板中，无法更改 HTML 的格式或内容。它必须完全依赖 CSS

以下是网站的总体布局

    <div id="container">
       <div id="header">...</div>
       <div id="content">...</div>
       <div id="footer">...</div>
    </div>

应用的 css 如下:

#container{
   -moz-border-radius: 15px !important;
   -webkit-border-radius: 15px !important;
   -khtml-border-radius: 15px !important;
   border-radius: 15px !important;
   overflow: hidden;
}

如果我将 overflow:hidden 更改为 overflow:visible，边框就会消失(至少在 Chrome 上是这样)。有谁知道为什么会发生这种情况以及是否有解决办法？

Answer 1

如果您询问为什么会发生这种情况，答案很简单。

大多数浏览器中的边框都是以这种方式工作的。发现一个边界矩形。围绕边界矩形绘制所需的半径。

问题是浏览器在边界矩形的边缘绘制边框。

所以理论上元素在圆 Angular 时可以突破矩形的边界。

这就是溢出。所以如果 overflow:visible 边缘可能不干净。

为什么 overflow:hidden 会解决这个问题

好吧，它的简单 overflow:hidden 只是隐藏了边界矩形边界之外的任何东西。因此，因此这将清理您的边界