我想知道你们认为在一个div周围以两种颜色实现双重边框的最简单方法是什么?我尝试使用border和outline组合,它在Firefox中有效,但outline在IE中似乎不起作用,这有点问题。有好的解决方法吗?
这是我的代码,但outline在IE中无效:
outline: 2px solid #36F;
border: 2px solid #390;
谢谢。
我想知道你们认为在一个div周围以两种颜色实现双重边框的最简单方法是什么?我尝试使用border和outline组合,它在Firefox中有效,但outline在IE中似乎不起作用,这有点问题。有好的解决方法吗?
这是我的代码,但outline在IE中无效:
outline: 2px solid #36F;
border: 2px solid #390;
谢谢。
.border
{
border:2px solid #36F;
position:relative;
z-index:10
}
.border:before
{
content:"";
display:block;
position:absolute;
z-index:-1;
top:2px;
left:2px;
right:2px;
bottom:2px;
border:2px solid #36F
}
使用盒阴影来创建第二个边框。
div.double-border {
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
}
如果没有其他更好的解决方案,你可以使用两个 div 来简单地解决问题。一个是主要的 div,另一个是空的 div,用来包装主要的 div,并在其上设置第二条边框。
虽然这个问题有点晚了,但我觉得我应该在某个地方记录一下。您可以在类似于Less或Stylus的东西中创建可扩展的函数,该函数将创建任意数量的边框(这里使用Stylus):
abs(n)
if n < 0
(-1*n)
else
n
horizBorder(n, backgroundColor)
$shadow = 0 0 0 0 transparent
$sign = (n/abs(n))
for $i in ($sign..n)
/* offset-x | offset-y | blur-radius | spread-radius | color */
$shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
return $shadow
那么,
$background: #FFF // my background was white in this case and I wanted alternating black/white borders
.border-bottom
box-shadow: horizBorder(5, $background)
.border-top
box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
.border{
width: 200px;
height: 200px;
background: #f06d06;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.border:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: green;
z-index: -1;
}
<div class="border">
</div>
使用类名 .border
来设置单个边框的值为 border:2px solid #000
。如果你想要另一个边框,可以尝试使用 .border:after
并给出相应的值。如果你需要第二个边框,请参考上面的代码示例。
box-shadow:
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;
使用box-shadow,您可以实现任意数量的不同颜色边框。例如:
#mydiv{
height: 60px;
width: 60px;
box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}
<div id="mydiv"> </div>
:before
,如果有的话)。但在IE8及以上版本应该没问题...而且它不需要操作HTML。 :) - cHao