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

nhaq1z21  于 2023-01-18  发布在  其他
关注(0)|答案(5)|浏览(186)

在我目前的工作中,我被要求在一个容器上制作一个双边框。加倍;实现这一点,但我的客户希望外边界更厚&内边界是正常的厚度。
除了创建2个div,1个嵌套在另一个中,外部div具有更大的厚度,或者通过使用边框图像,还有什么方法可以用CSS只使用1个div来完成吗?指定边框样式:加倍;并且仍然能够使外部边界变厚。

wecizke3

wecizke31#

轮廓包含在CSS3规范中,允许将边框和轮廓应用于单个元素。
outline属性与border命令相同,但是附加的offset属性允许边框进一步移动到元素的内部或外部。
我用轮廓给予边框2种不同的颜色,改变代码给你的边框2种不同的大小。

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

ebdffaop2#

不,这是不可能的。CSS边框宽度指定了边框的总厚度,与边框样式无关。我看不出比用另一个DIV Package 它更好的方法。

**编辑:**您可以使用outline来破解它,但有一个subtle difference between outline and border

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

(this将产生一个1px的内部和4px的外部“边界”,如果你可以这样称呼它的话)

2lpgd968

2lpgd9683#

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

如果你不使用双边框样式,你可以有更多的控制权。这种方法可以完全控制外边框、内轮廓和它们之间的空间。

uklbhaso

uklbhaso4#

或者,您可以使用带有CSS3中的新功能的边框图像,尽管它在大多数当前使用的浏览器中不受支持。

kdfy810k

kdfy810k5#

HTML代码

<div id='border'>Your Text</div>

CSS代码

#border{
    border: 2px solid blue;
    box-shadow: 0 0 0 5px green;

相关问题