外边框比内边框粗的 CSS 双边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4181183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Double Border with outer border thicker than inner border
提问by learnjourney
In my current work I'm required to produce a double border on a container. The border-style: double; achieve this, however my client want the outer border to be thicker & the inner border to be of the normal thickness.
在我目前的工作中，我需要在容器上制作双边框。边框样式：double；实现这一点，但是我的客户希望外边框更厚，内边框为正常厚度。
Other than creating 2 divs, 1 nested inside another with the outer div having a larger thickness, or through the use of border images is there any way I can do it with CSS with just 1 div? specifying border-style: double; and still be able to make the outer border thicker.
除了创建 2 个 div，1 个嵌套在另一个 div 内，外部 div 的厚度更大，或者通过使用边框图像，有什么方法可以用 CSS 只用 1 个 div 做到这一点？指定边框样式：double；并且仍然能够使外边框更厚。
回答by bnabilos
Outlines are included in the CSS3 specification and allow both a border and an outline to be applied to a single element.
轮廓包含在 CSS3 规范中，允许将边框和轮廓应用于单个元素。
The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.
轮廓属性与边框命令相同。然而，额外的偏移属性允许边框在元素的内部或外部进一步移动。
I used outlines to give borders 2 different colors, change the code to give your borders 2 different sizes.
我使用轮廓为边框提供 2 种不同的颜色，更改代码为您的边框提供 2 种不同的尺寸。
#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}回答by casablanca
No, it's not possible. The CSS border width specifies the total thickness of the border, regardless of the border style. I don't see a better way than wrapping it in another DIV.
不，这不可能。CSS 边框宽度指定边框的总厚度，与边框样式无关。我没有看到比将它包装在另一个 DIV 中更好的方法。
Edit:You could hack it in using outline, but there is a subtle difference between outlineand border.
编辑：您可以使用 破解它outline，但和之间outlineborder存在细微差别。
border: double 4px black;
outline: solid 3px black;
(this will produce a 1px inner and 4px outer "border", if you can call it that)
（这将产生一个 1px 的内部和 4px 的外部“边框”，如果你可以这样称呼它）
回答by Niet the Dark Absol
Or you could use a border image with that fancy new stuff in CSS3, though it wouldn't be supported in most currently-used browsers.
或者，您可以在 CSS3 中使用带有那些精美新内容的边框图像，尽管大多数当前使用的浏览器不支持它。
回答by Max Girkens
You can also use the :before pseudo-element like this:
您还可以像这样使用 :before 伪元素：
https://stackoverflow.com/a/11179169/1468708
https://stackoverflow.com/a/11179169/1468708
So that you can have a double border with different thickness just at the bottom, for example.
例如，这样您就可以在底部有一个不同厚度的双边框。
回答by Elliot Peter
#box {
border: solid 4px #333;
outline: solid 3px #333;
outline-offset: -12px;
}
If you don't use the double style on your border you can have more control. This method will give full control of styles for the outer border, the inner outline, and the space between them.
如果您不在边框上使用双重样式，则可以有更多控制权。此方法将完全控制外边框、内轮廓和它们之间的空间的样式。
