是否可以为一个元素提供两个不同的边界？ [英] Is it possible to give one element two different borders?

问题描述

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

推荐答案

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

这篇关于是否可以为一个元素提供两个不同的边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！