在我目前的工作中,我被要求在一个容器上制作一个双边框。加倍;实现这一点,但我的客户希望外边界更厚&内边界是正常的厚度。除了创建2个div,1个嵌套在另一个中,外部div具有更大的厚度,或者通过使用边框图像,还有什么方法可以用CSS只使用1个div来完成吗?指定边框样式:加倍;并且仍然能够使外部边界变厚。
wecizke31#
轮廓包含在CSS3规范中,允许将边框和轮廓应用于单个元素。outline属性与border命令相同,但是附加的offset属性允许边框进一步移动到元素的内部或外部。我用轮廓给予边框2种不同的颜色,改变代码给你的边框2种不同的大小。
#box { border: 1px double #000; outline: 2px solid #699; outline-offset: -9px; }
ebdffaop2#
不,这是不可能的。CSS边框宽度指定了边框的总厚度,与边框样式无关。我看不出比用另一个DIV Package 它更好的方法。
**编辑:**您可以使用outline来破解它,但有一个subtle difference between outline and border。
outline
border
border: double 4px black; outline: solid 3px black;
(this将产生一个1px的内部和4px的外部“边界”,如果你可以这样称呼它的话)
2lpgd9683#
#box { border: solid 4px #333; outline: solid 3px #333; outline-offset: -12px; }
如果你不使用双边框样式,你可以有更多的控制权。这种方法可以完全控制外边框、内轮廓和它们之间的空间。
uklbhaso4#
或者,您可以使用带有CSS3中的新功能的边框图像,尽管它在大多数当前使用的浏览器中不受支持。
kdfy810k5#
HTML代码
<div id='border'>Your Text</div>
CSS代码
#border{ border: 2px solid blue; box-shadow: 0 0 0 5px green;
5条答案
按热度按时间wecizke31#
轮廓包含在CSS3规范中,允许将边框和轮廓应用于单个元素。
outline属性与border命令相同,但是附加的offset属性允许边框进一步移动到元素的内部或外部。
我用轮廓给予边框2种不同的颜色,改变代码给你的边框2种不同的大小。
ebdffaop2#
不,这是不可能的。CSS边框宽度指定了边框的总厚度,与边框样式无关。我看不出比用另一个DIV Package 它更好的方法。
**编辑:**您可以使用
outline
来破解它,但有一个subtle difference betweenoutline
andborder
。(this将产生一个1px的内部和4px的外部“边界”,如果你可以这样称呼它的话)
2lpgd9683#
如果你不使用双边框样式,你可以有更多的控制权。这种方法可以完全控制外边框、内轮廓和它们之间的空间。
uklbhaso4#
或者,您可以使用带有CSS3中的新功能的边框图像,尽管它在大多数当前使用的浏览器中不受支持。
kdfy810k5#
HTML代码
CSS代码