CSS双边框，外边框比内边框厚答案

【问题标题】：CSS Double Border with outer border thicker than inner borderCSS双边框，外边框比内边框厚
【发布时间】：2019-07-18 09:00:45
【问题描述】：

在我目前的工作中，我需要在容器上制作双边框。边框样式：双；实现这一点，但是我的客户希望外边框更厚，内边框为正常厚度。

除了创建 2 个 div，1 个嵌套在另一个 div 中，外部 div 具有更大的厚度，或者通过使用边框图像，有什么方法可以用 CSS 来实现，只有 1 个 div？指定边框样式：双；并且仍然能够使外边框更厚。

【问题讨论】：

标签： css

【解决方案1】：

轮廓包含在 CSS3 规范中，允许将边框和轮廓应用于单个元素。

outline 属性与border 命令相同。然而，额外的偏移属性允许边框在元素内部或外部进一步移动。

我使用轮廓为边框赋予 2 种不同颜色，更改代码以赋予边框 2 种不同大小。

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}

【讨论】：

【解决方案2】：

不，这是不可能的。 CSS 边框宽度指定边框的总厚度，与边框样式无关。我认为没有比将其包装在另一个 DIV 中更好的方法了。

编辑：您可以使用outline 破解它，但有一个subtle difference between outline and border。

border: double 4px black;
outline: solid 3px black;

（这将产生一个 1px 内和 4px 外的“边框”，如果你可以这样称呼它）

【讨论】：

【解决方案3】：

或者您可以在 CSS3 中使用带有新奇东西的边框图像，尽管目前大多数浏览器都不支持它。

【讨论】：

【解决方案4】：

#box {
    border: solid 4px #333;
    outline: solid 3px #333;
    outline-offset: -12px;
}

如果您不在边框上使用双重样式，您可以拥有更多控制权。此方法将完全控制外边框、内轮廓以及它们之间的空间的样式。

【讨论】：