填充父元素的大小，包括 CSS 中的（圆角）边框答案

【问题标题】：Fill parent element's size, including its (rounded) border in CSS填充父元素的大小，包括 CSS 中的（圆角）边框
【发布时间】：2015-08-23 16:36:57
【问题描述】：

是否可以设置子元素的大小以填充其父元素和其父元素的（圆形）边框？假设我不能简单地对所有内容进行硬编码。

这是我的初始代码：JSFiddle。 <a> 的大小为 80 x 80 像素，而 <li> 的大小为 82 x 82 像素，因为它有边框。激活:hover 时差异很明显。

It seems that 使用outline 代替border 会做我想做的事，但没有跨浏览器outline-radius。这导致我使用box-shadow 找到this answer；这行得通（JSFiddle），但有没有更“hacky”的方法？从语义上讲，我想要一个边框，而不是一个阴影。

【问题讨论】：

但是那个影子好像是个边框。我肯定会选择那个解决方案。
其实我目前正在使用那个解决方案；似乎必须有更好的方法。

标签： html css

【解决方案1】：

最简单的方法...盒子大小。

* {
    box-sizing: border-box;
}

如果您不想使用它，那么唯一合乎逻辑的解决方案就是使用 box-shadow。

【讨论】：

如果我只将它添加到.exp { ... }，这似乎也有效。是否需要应用于所有元素？
不...您可以在需要或想要的任何地方添加它。虽然它在应用于所有元素时更容易编码。在我看来保持代码一致。

【解决方案2】：

box-shadow 可能是跨浏览器支持最可靠的选项，尽管它在某些较旧的浏览器中不受支持。 Setting the shadow 到 inset 的行为类似于元素内部而不是外部的边框，这将解决有点“hacky”的外观并保持一致的大小。

浏览器呈现边框的方式类似于margin 或padding，这会影响元素占用的空间量。使用inset（即在元素内渲染）可以避免这个问题。

通过考虑box-shadow 用于具有内置渐变功能和一些新选项（如二维inset 定位）的边框的简写，这种方法在语义上是合理的。

【讨论】：