【问题标题】：Is it possible to give one element two different borders?是否可以给一个元素两个不同的边界？
【发布时间】：2013-04-01 14:49:06
【问题描述】：

我查找了这个，但我根本找不到我正在寻找的答案。我的网页上有多个 div，它们周围都有一个 1px 纯黑色的黑色边框。除了具有特定 id 的两个 div。它们有一个 10 像素的不同颜色边框，但我想用 1 像素纯黑色的边框包围它。有什么建议？我所有的 div 都是 javascript 创建的。

【问题讨论】：

标签： css colors border

【解决方案1】：

在所有浏览器中唯一可靠的方法是使用额外的 DIV 容器并为其加上边框以及内部的 DIV。

Louis Lazaris 在http://www.impressivewebs.com/multiple-borders-css/ 详细介绍了适用于许多浏览器的其他一些方法

Lazaris 方法简介

边框和轮廓

支持：除 IE6/7 之外的所有支持
注意：outline 不会影响其周围元素的流动，因此它会与其他元素重叠或重叠。

.one {  
    border: solid 6px #fff;  
    outline: solid 6px #888;      
}

伪元素

注意：min-height 保持垂直流动。

.two {  
    border: solid 6px #fff;  
    position: relative;  
    z-index: 1;  
}  

.two:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: -12px;  
    left: -12px;  
    border: solid 6px #888;  
    width: 312px;  
    padding-bottom: 12px;  
    min-height: 100%;  
    z-index: 10;  
}

盒子阴影

注意：box-shadow 也不会影响其周围元素的流动。

我使用了两个阴影（逗号分隔），并将偏移和模糊设置设置为零，同时为每个阴影提供适当的大小。因为一个与另一个重叠，第二个阴影的大小是另一个的两倍。关键部分是缺乏模糊和完全不透明的颜色。这为每个阴影提供了一条直边，就像边框一样。

.three {  
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;  
}

额外的

支持：所有浏览器

.four {  
    border: solid 6px #888;  
    background: #fff;  
    width: 312px;  
    min-height: 312px;  
}  

.four div {  
    width: 300px;  
    min-height: 300px;  
    background: #222;  
    margin: 6px auto;  
    overflow: hidden;  
}

边框图片

.five {  
    border-width: 12px;  
    -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;  
    -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;  
    border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */  
}

【讨论】：

这是一个非常好的链接！如果您也可以在此处添加一些信息，以防链接更改，那就太好了。
当然，我不愿侵犯该资源，因为很难解释已经简洁的示例，但希望我已经足够清楚了，这项工作不是我自己的。 ^_^

【解决方案2】：

不完全是双边框，但您可以像 box-shadow 一样提供边框，这样可以达到您想要的效果。

【讨论】：