CSS多层边框？

Question

我想在本网站（main/big 中制作一个像这样的 div 边框：http://wiki.travian5.com/tiki-index.php

但到目前为止我得到的是：

#main {
    border: 5px solid #d5d8db;
    outline: #ffffff solid 1px;
}

快完成了。就是不知道边框前那条黑线怎么画。

知道如何解决这个问题吗？我尝试研究但找不到任何东西。

Answer 1

#main 元素中嵌套了另一个元素

例如：

#main {
     border: 5px solid #d5d8db;
     outline: 1px solid #ffffff;
}

#content {
     border: 1px solid gray;
}

<div id="main">
    <div id="content">
        Hello World!
    </div>
</div>

提示：我建议改用 类（例如 .main、.content）

Answer 2

将当前的 div 放入另一个 div 中，如下所示：

<div><div>"Your stuff here"</div></div>

然后让外面的 div 比里面大一点（或者使用填充，实际上有很多方法可以做到），我会使用 z-index 来确保你的outer div 在 inside 下方。如果您只想要纯色，只需将外部 div 背景色设为黑色即可。