如何在不使用轮廓线的情况下实现CSS双边框（两种颜色）？

Question

我想知道你们认为在一个div周围以两种颜色实现双重边框的最简单方法是什么？我尝试使用border和outline组合，它在Firefox中有效，但outline在IE中似乎不起作用，这有点问题。有好的解决方法吗？

这是我的代码，但outline在IE中无效：

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

谢谢。

- zProgrammer

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/

- albert

---

请参考，这在IE7中无效（大部分情况下不理解 :before，如果有的话）。但在IE8及以上版本应该没问题...而且它不需要操作HTML。 :) - cHao

@Jack，我只是指出这个解决方案在我给你发送的链接中排名第二，该链接详细介绍了多种不同的方法。 - Nick Mitchinson

你可以在IE7中使用以下CSS伪元素的hack：https://dev59.com/questions/um855IYBdhLWcg3wuG0M - albert

Answer 2

使用盒阴影来创建第二个边框。

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不像outline一样忽略border-radius属性。

- Vitali Protosovitski

Answer 3

如果没有其他更好的解决方案，你可以使用两个 div 来简单地解决问题。一个是主要的 div，另一个是空的 div，用来包装主要的 div，并在其上设置第二条边框。

- Nick Mitchinson

---

是的，那就是我要做的。只是好奇是否有一些简单的CSS可以做到这一点。 - zProgrammer

不是我知道的。我假设你已经阅读过这篇文章了，但以防万一：http://www.impressivewebs.com/multiple-borders-css/ - Nick Mitchinson

Answer 4

虽然这个问题有点晚了，但我觉得我应该在某个地方记录一下。您可以在类似于Less或Stylus的东西中创建可扩展的函数，该函数将创建任意数量的边框（这里使用Stylus）：

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)

- chas

Answer 5

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

<div class="border">
  
</div>

使用类名 .border 来设置单个边框的值为 border:2px solid #000。如果你想要另一个边框，可以尝试使用 .border:after 并给出相应的值。如果你需要第二个边框，请参考上面的代码示例。

- user8450943

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;

- TheCrazyProfessor

Answer 7

使用box-shadow，您可以实现任意数量的不同颜色边框。例如：

#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

- aruanoc