CSS 外边框

Question

我希望能够在我的 Div 之外绘制边框!所以如果我的 div 是 20px x 20px，我想要一个 1px 的边框(所以本质上，我得到一个 22x22px 大的 div)。

我知道我可以将 div 设置为 22x22，但出于我的原因，我需要边框在外面。

CSS 轮廓有效，但我只想要 border-bottom 或 border-top 之类的东西，所以像 outline-bottom 这样的东西不起作用，这就是我想要的。

有办法吗？

谢谢

Answer 1

我认为您对这两个属性的理解有点偏差。 Border 影响元素的外边缘，使元素大小不同。 Outline 不会改变元素的大小或位置(不占用空间)并超出边框。根据您的描述，您想使用 border 属性。

在您的浏览器中查看下面的简单示例:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

请注意边框如何将底部 div 推过去，但轮廓不会移动顶部 div 并且轮廓实际上与底部 div 重叠。

您可以在这里阅读更多相关信息:
Border
Outline