CSS双边框（2种颜色）不使用轮廓？

一尘不染

CSS双边框（2种颜色）不使用轮廓？

css

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

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

谢谢。

阅读 1407

2020-05-16

共1个答案

一尘不染

您可以使用伪元素添加多个边框，然后将其放置在原始边框周围。没有额外的标记。跨浏览器兼容，自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
}

2020-05-16