CSS双边框（2个色），而不使用大纲？(CSS double border (2 colors) w

我想知道你们认为是什么让周围一个div 2个色双边框的最简单的方法？我尝试使用边界和轮廓在一起，它在Firefox的工作，但轮廓似乎并不在IE工作，这就是排序的问题。任何好的方法去吗？

这是我有，但是轮廓不与IE浏览器：概要：2px的固体＃36F; 边界：2px的固体＃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/

Answer 2:

使用箱阴影FO第二个边界。

div.double-border {
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 1px #000;
    -moz-box-shadow: 0px 0px 0px 1px #000;
    box-shadow: 0px 0px 0px 1px #000;
}

在这种情况下，像大纲做的box-shadow不会忽略边界半径财产

Answer 3:

一个非常简单的解决方案，你可以作为后备使用，如果没有别的办法是使用两个div。你的主要格，然后一个空的包装只是它，你可以用它来设置第二个边界。

Answer 4:

迟到了这个问题，但我觉得我应该记录这个地方。你可以做一个可扩展的功能的东西一样都不能少或手写笔，这将产生许多边界（手写笔点击这里）：

abs(n)
    if n < 0
        (-1*n)
    else
        n

horizBorder(n, backgroundColor)
    $shadow = 0 0 0 0 transparent
    $sign = (n/abs(n))
    for $i in ($sign..n)
        /* offset-x | offset-y | blur-radius | spread-radius | color */
        $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
    return $shadow

然后，

$background: #FFF // my background was white in this case and I wanted alternating black/white borders

.border-bottom
    box-shadow: horizBorder(5, $background)
.border-top
    box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background)

Answer 5:

随着箱阴影，只要你想，你可以实现许多不同颜色的边框。例如：

#mydiv{
  height: 60px;
  width: 60px;
  box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}

<div id="mydiv">&nbsp;</div>

https://jsfiddle.net/aruanoc/g5e5pzny

Answer 6:

一个小技巧;）

box-shadow: 
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;

Answer 7:

 .border{ width: 200px; height: 200px; background: #f06d06; position: relative; border: 5px solid blue; margin: 20px; } .border:after { content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; background: green; z-index: -1; }