溢出：隐藏中断边界半径答案

【问题标题】：overflow: hidden breaks border-radius溢出：隐藏中断边界半径
【发布时间】：2011-10-06 23:53:25
【问题描述】：

我在容器 div、边框半径和溢出方面遇到问题。

（对于 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;
}

如果我将溢出：隐藏更改为溢出：可见边框消失（至少在 Chrome 上）。有谁知道为什么会发生这种情况以及是否有解决方法？

【问题讨论】：

我知道为什么会这样。没有overflow:hidden 的解决方案让我望而却步

标签： html css

【解决方案1】：

如果你问为什么会这样，答案很简单。

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

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

所以理论上元素在四舍五入时可以突破矩形的边界。

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

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

它的简单溢出：隐藏只是隐藏边界矩形边界之外的任何内容。因此，这将清理您的边界

【讨论】：

【解决方案2】：

我一直在按钮上使用半径，有时 !important; 在边界半径上使用时会导致规则集崩溃，然后删除 !important 会导致规则集再次工作...

（在调整一些网站的css时发现）

【讨论】：

他从来没有说过他的规则集崩溃了？边框有效，但只是有溢出问题