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

Question

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

除了创建2个div之外，1个嵌套在另一个div中，外部div具有更大的厚度，或者通过使用边框图像有什么办法可以用CSS只用1个div来做它？指定border-style：double;并且仍然能够使外边框更厚。

Answer 1

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

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

我使用轮廓为边框提供2种不同的颜色，更改代码以使边框有2种不同的尺寸。

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

Answer 2

不，这是不可能的。无论边框样式如何，CSS边框宽度都指定边框的总厚度。我没有看到比将它包装在另一个DIV中更好的方式。

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

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

（这会产生一个1px内部和4px外部“边框”，如果你可以称之为）

Answer 3

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

Answer 4

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

https://stackoverflow.com/a/11179169/1468708

例如，您可以在底部设置不同厚度的双边框。

Answer 5

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

如果您在边框上不使用double样式，则可以进行更多控制。 此方法将完全控制外部边框，内部轮廓以及它们之间的空间的样式。