html - 跨浏览器双边框/内轮廓

Question

重新创建如下所示的跨浏览器的微妙内部轮廓的正确方法是什么？

目前，我有一个外部 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 并且只希望在 IE 中返回一个版本，那么 CSS3 方法可以box-shadow: inset...用来完成第二个边框。

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

Answer 4

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

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

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

我认为如果你将它与 CSS3 边框半径结合起来，你也可以获得圆角效果。

Answer 5

这个怎么样？小提琴

您可以添加: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;
}