跨浏览器双边框/内部轮廓

Question

重新创建一个微妙的内部轮廓的正确方法是什么，如下面的跨浏览器工作？

目前，我有一个外部div和一个内部div，它们都有不同颜色的边框。有没有只使用一个div而不是两个div的解决方案？

Answer 1

未经测试：您可以结合使用box-shadow，outline＆amp; border：

div{
    height:200px;
    width:200px;
    background:#F7F7F7;
    box-shadow:0 0 3px red inset;
    outline: solid 2px blue;
    border:solid 1px #F7F7F7;
}

预览：http://codepen.io/anon/pen/vthAJ

Answer 2

的 jsFiddle Demo 的

我通常为这种方法做的是创建一个带边框和填充的div容器。然后我会有一个带边框的div内部。这样容器可以保持外边框和包含的边框颜色。而你的内部div可以保持内部边框颜色。

HTML

<div class="outer">
 <div class="inner">
    <div class="content">
        Just some text.<br>
        Could be other stuff,<hr>
        In here too.
    </div>
 </div>
</div>

CSS

body{
 background-color:#545454;
}
.outer{
 border: 2px solid black;
 padding: 3px;
 border-radius:4px;
 width:200px;
 height:200px;
 background-color:#858585;
}
.inner{
 background-color:#545454;
 width:196px;
 height:196px;
 border-radius:4px;
 border:2px solid black;
}
.content{
 color:white;
 padding:5px;
}

Answer 3

您可以尝试使用CSS3边框图像：

http://css-tricks.com/understanding-border-image/

这将允许您只使用一个div。 您只需要创建简单，小巧的可重复缩略图。一边只有一种颜色，另一面只有另一种颜色。或者像图片中那样创建渐变。你可能知道演习。

我认为如果将它与CSS3 border-radius结合使用，您还可以获得圆角效果。

Answer 4

这个怎么样？ FIDDLE

您可以添加带有边框的:after伪元素。

.double {
    position: relative;
    border: 2px solid silver;
}

.double:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid black;
}

Answer 5

屏幕截图也有border-radius，所以如果你可以使用CSS3并且只想在IE中找回一个版本，那么有一些CSS3方法可以使用box-shadow: inset...来完成第二个边框。

如果您不关心屏幕截图的border-radius方面，可以使用border和outline的组合。有关示例，请参阅Fiddle。