html - 不使用轮廓的 CSS 双边框(2 种颜色)？

Question

我想知道你们认为在 div 周围使用 2 种颜色的双边框的最简单方法是什么？我尝试同时使用边框和大纲，它在 Firefox 中有效，但大纲在 IE 中似乎不起作用，这是一个问题。有什么好的方法可以解决这个问题吗？

这是我的，但大纲不适用于 IE: 大纲:2px 实心#36F； 边框:2px solid #390;

谢谢。

Answer 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
}

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