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,但是和之间outlineborder有一个微妙的区别.

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

(这将产生1px内部和4px外部"边界",如果你可以称之为)