css - 是否可以给一个元素两个不同的边框？

Question

我已经查过了，但我根本找不到我要找的答案。我的网页上有多个 div，它们周围都有一个 1px 纯黑色的黑色边框。除了具有特定 ID 的两个 div。它们有一个 10 px 的不同颜色边框，但我想用 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 也不影响它周围的元素流。

I’m using two shadows (comma separated) and I’ve set the offset and blur settings to zero, while giving each shadow an appropriate size. Because one overlaps the other, the second shadow is twice the size of the other. The key parts are the lack of blur and a fully opaque color. This gives each shadow a straight edge, just like a border.

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