是否有可能给一个元素两个不同的边界？

Question

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

Answer 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

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

  

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

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

额外＆lt; div＆gt;

支持：所有浏览器

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

Answer 2

不完全是双边框，但你可以像框阴影一样给出边框，它可以给你带来理想的效果。