CSS多层边框？

Question

我想在这个网站（主要/大网站）中创建一个像这样的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比内部div大一点（或使用填充，实际上有很多方法可以实现），我会使用z-index来确保你的外部div在内部一。如果您想要的只是纯色，那么只需将外部div背景颜色设置为黑色就可以了。