CSS双边框（2种颜色）不使用轮廓？答案

【问题标题】：CSS double border (2 colors) without using outline?CSS双边框（2种颜色）不使用轮廓？
【发布时间】：2013-01-22 00:50:10
【问题描述】：

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

这是我所拥有的，但大纲不适用于 IE：轮廓：2px 实心#36F；边框：2px 实心 #390;

谢谢。

【问题讨论】：

标签： html css border pseudo-element

【解决方案1】：

一个非常简单的解决方案，如果没有其他方法，您可以将其用作备用方案，即使用两个 div。您的主 div，然后是一个空的，只是将它包装起来，您可以使用它来设置第二个边框。

【讨论】：

是的，这就是我要做的。只是好奇是否有一些我忽略的简单 CSS。
我不知道。我假设你已经读过这篇文章，但只是以防万一：impressivewebs.com/multiple-borders-css

【解决方案2】：

您可以使用伪元素添加多个边框，然后将它们放置在原始边框周围。没有额外的标记。跨浏览器兼容，自 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/

【讨论】：

作为参考，这不适用于 IE7（在大多数情况下不理解 :before，如果有的话）。不过，IE8 及更高版本应该没问题……而且它不需要弄乱 HTML。 :)
谢谢！解释也很好。
@Jack，只是指出这个解决方案在我发给你的链接中排名第二，详细介绍了多种不同的方式。
这里可以在ie7中使用stackoverflow.com/questions/4181884/…

【解决方案3】：

对第二个边框使用盒子阴影。

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 属性

【讨论】：

【解决方案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)

【讨论】：

【解决方案5】：

使用 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

【讨论】：

【解决方案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;

【讨论】：

【解决方案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;
}

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

使用.border 的类名，给定单个边框的值border:2px solid #000。然后你想要另一个边框尝试.border:after 如果你有第二个边框检查代码示例上方的值例子

【讨论】：