Question

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

这就是我所拥有的，但大纲不适用于IE：

outline: 2px solid #36F;
border: 2px solid #390;

Answer 1

只需使用2个div

<div style="border: 2px solid #36F">
    <div style="border: 2px solid #390">
        Text goes here
    </div>
</div>

http://jsfiddle.net/fpCAf/

Answer 2

这可能有效：

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

Answer 3

一些可能性：

边框+大纲边框， IE失败。
border-image。你需要制作图像（浪费时间？） IE 9失败
伪元素，快速简便：无需使用额外的标记，图像和渐变。 IE8应该处理它，但不能处理渐变
border + box-shadow IE9应该处理它，过滤旧版IE不好看
可以在内部和外部绘制多个框阴影，非常适合对边框的depht效果，它也遵循border-radius。 IE9应该处理它，过滤旧版IE不好看
背景图片和渐变 IE9在渐变上失败

......离开？如果你想要少于IE8：包装2个元素来绘制2个基本边框

如何制作css两个边框？

3 个答案: