Html 不使用轮廓的 CSS 双边框（2 种颜色）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS double border (2 colors) without using outline?
提问by zProgrammer
I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?
我想知道你们认为在 div 周围获得两种颜色的双边框的最简单方法是什么？我尝试同时使用边框和大纲，它在 Firefox 中工作，但大纲在 IE 中似乎不起作用，这是一个问题。有什么好的方法可以解决这个问题吗？
This is what I had but outline does not work with IE: outline: 2px solid #36F; border: 2px solid #390;
这是我所拥有的，但大纲不适用于 IE：大纲：2px solid #36F; 边框：2px 实心 #390；
Thanks.
谢谢。
回答by albert
You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1. I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.
您可以使用伪元素添加多个边框，然后将它们放置在原始边框周围。没有额外的标记。跨浏览器兼容，这从 CSS 2.1 开始就存在了。我在 jsfiddle 上为你做了一个演示......注意，边框颜色之间的间距是示例。您可以通过更改绝对定位中的像素数来关闭它。
.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
}
回答by Vitali Protosovitski
Use box shadow fo 2nd border.
对第二个边框使用框阴影。
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;
}
In this case box-shadow does not ignore border-radius property like outline does
在这种情况下 box-shadow 不会像outline那样忽略border-radius属性
回答by Nick Mitchinson
A very simple solution you could use as a fall-back if nothing else would be to use two divs. Your main div, and then an empty one just wrapping it that you could use to set the second border.
一个非常简单的解决方案，你可以用作后备，如果没有别的办法是使用两个 div。您的主 div，然后是一个空的 div，只是将它包裹起来，您可以用它来设置第二个边框。
回答by chas
Late to the party for this question, but I feel like I should record this somewhere. You can make a scalable function in something like Less or Stylus which will create any number of borders (Stylus here):
这个问题迟到了，但我觉得我应该把它记录在某个地方。您可以在 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
Then,
然后，
$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)
回答by aruanoc
With box-shadow you can achieve as many different color borders as you want. E.g:
使用 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>
回答by TheCrazyProfessor
A little trick ;)
一个小技巧;)
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;
回答by TheCrazyProfessor
.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>use the class name for .bordergiven the vales border:2px solid #000for single border.then you want another border try to .border:aftergiven the values if you got second border check out above the code sample
example
使用.border给border:2px solid #000定单边框.border:after值的类名。然后你想要另一个边框尝试给出值，如果你在代码示例示例上方有第二个边框检查
