css - 如何让css有两个边框？

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

几种可能性：

1. 边框+轮廓边框，IE失败。
2. 边框图像。您需要生成图像（浪费时间？）IE 9 失败
3. 伪元素，快速简单：不需要额外的标记，可以使用图像和渐变。IE8 应该处理它，但不是渐变
4. Borders + box-shadow IE9 应该处理它，旧 IE 的过滤器不好看
5. 可以在内部和外部绘制多个盒子阴影，非常适合在边界上产生深度效果，它也遵循边界半径。IE9 应该处理它，过滤旧 IE 不好看
6. 背景图像和渐变IE9 在渐变上失败

... 剩下？如果你想要小于 IE8：包装 2 个元素以绘制 2 个基本边框

Answer 3

这可能有效：

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