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

Question

重新创建像下面这样的跨浏览器的内部轮廓的正确方法是什么？

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

Answer 1

未经测试：您可以结合使用box-shadow ， outline和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边框半径结合使用，还可以获得圆角效果。

Answer 4

这个怎么样？ 小提琴

您可以在边框:after添加: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

屏幕快照还具有边框半径，因此，如果您可以使用CSS3，并且只想在IE中返回某个版本，则可以使用box-shadow: inset...来完成第二个边框，因此有CSS3方法可以使用。

如果您不关心屏幕截图的边框半径方面，可以使用border和outline的组合。 请参阅小提琴示例。