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

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

---

除了创建2个div，1个嵌套在另一个div中，外部div具有更大的厚度，或者通过使用边框图像，是否有任何方法可以使用CSS仅使用1个div？指定边框样式：双精度；而且仍然能够使外部边界更厚。

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

编辑：您可以使用

大纲

对其进行破解，但存在一个漏洞

---

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

或者你可以在CSS3中使用一个边框图像和一个新奇的东西，尽管大多数当前使用的浏览器都不支持它。

大纲包含在CSS3规范中，允许对单个元素应用边框和大纲

outline属性与border命令相同。但是，附加偏移特性允许边界在图元内部或外部进一步移动

我用轮廓线给边框两种不同的颜色，修改代码给边框两种不同的尺寸

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

---

您还可以使用：before伪元素，如下所示：

例如，在底部可以有一个不同厚度的双边框

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

如果不在边框上使用双色样式，则可以进行更多控制。

---

此方法将完全控制外部边框、内部轮廓以及它们之间的空间的样式。

也可以偶然发现轮廓，看起来是适合此工作的工具！：）。这是我在这个网站上的第一个问题：D.请注意差异。例如，如果将框阴影应用于元素，则轮廓跟随阴影及其偏移，而不是原始框。轮廓对于CSS3来说并不新鲜-还要注意的是，IE中不支持

轮廓偏移量

。轮廓并不完全相同。例如，没有“轮廓半径”这样的东西，所以只能对长方体图元使用它。

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