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

Question

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

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

Answer 1

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;
}