2

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

4

2 回答 2

4

在所有浏览器中唯一可靠的方法是使用额外的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;  
}

额外的 <div>

支持：所有浏览器

.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 */  
}
于 2013-04-09T23:34:16.903 回答
0

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

于 2013-04-10T02:50:22.037 回答