CSS双边框(2种颜色)不使用轮廓?

我想知道你们认为最简单的方法是在div上获得2种颜色的双边框吗?我尝试一起使用border和outline,并且它在Firefox中可以工作,但是Outline似乎在IE中不起作用,这有点问题。有什么好的方法吗?

这就是我所拥有的,但是大纲不适用于IE:outline:2px solid#36F; 边框:2px实线#390;

谢谢。

回答:

您可以使用伪元素添加多个边框,然后将其放置在原始边框周围。没有额外的标记。跨浏览器兼容,自CSS

2.1开始就存在。我为您提供了一个关于jsfiddle的演示。…请注意,示例中的边框颜色之间存在间距。您可以通过更改绝对位置中的像素数来关闭它。

.border

{

border:2px solid #36F;

position:relative;

z-index:10

}

.border:before

{

content:"";

display:block;

position:absolute;

z-index:-1;

top:2px;

left:2px;

right:2px;

bottom:2px;

border:2px solid #36F

}

以上是 CSS双边框(2种颜色)不使用轮廓? 的全部内容, 来源链接: utcz.com/qa/434568.html

回到顶部