如何让css有两个边框？答案

【问题标题】：How to make css two borders?如何让css有两个边框？
【发布时间】：2013-06-12 07:55:41
【问题描述】：

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

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

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

【问题讨论】：

CSS double border (2 colors) without using outline?的可能重复

标签： css colors border

【解决方案1】：

这可能有效：

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

【讨论】：

感谢我也可以使用:after 制作三重边框

【解决方案2】：

只需使用 2 个 div

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

http://jsfiddle.net/fpCAf/

【讨论】：

【解决方案3】：

几种可能性：

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

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

【讨论】：