html – CSS双边框(2种颜色),不使用大纲？

我想知道你们认为什么是最简单的方法来获得一个双色的双边框围绕一个div？我尝试使用边框和轮廓在一起,它在Firefox中工作,但是大纲在IE中似乎不起作用,这是一个问题.有什么好办法吗？

这是我的,但大纲不适用于IE：
大纲：2px solid#36F;
border：2px solid#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
}

http://jsfiddle.net/fvHJq/1/

原文地址：https://www.jb51.cc/html/230320.html