只使用一个div，是否可能将边框放在内部填充区域上？

Question

我想知道是否有方法只使用一个div来实现嵌套边框效果？还是必须使用两个div？我的意思是：

目前我正在使用一个带有边框的div，包在一个带padding的div里。我必须在脑海中记住哪些内部包装与哪些外部包装相对应。我希望只有一个元素在页面上看起来像这样:

而不是必须使用两个div并将它们配对。以下是我正在使用的CSS：

.out_wrap_blk{
    padding: 5px;
    background: black;
    float:left;
    margin: 10px;
}

.out_wrap_gry{
    padding: 5px;
    background: #323232;
    float:left;
    margin: 10px;
}

.in_wrap_grn{
    border: 1px solid #0CFF0E;
    padding: 20px;
}

.in_wrap_blk{
    border: 1px solid black;
    padding: 20px;
}

这个问题可以将两个元素简化为一个元素吗？还是必须保留一个外部元素包裹一个内部元素的结构？

- Digital Brent

Answer 1

试试这个：

#bor-outline {
  width: 100px;
  height: 100px;
  background: grey;
  border: 4px solid #292929;
  outline: 4px solid #e3e3e3;
}

<div id="bor-outline">
  hello
</div>

- Rachel Gallen

---

谢谢！我甚至不知道这个CSS属性的存在！ - Digital Brent

Answer 2

你只需要使用CSS的神奇属性outline-offset就可以了：

这里是一个JSFiddle示例。 CSS:

div {
    background: #808080;
    margin: 20px;
    width: 200px;
    padding: 20px;
    height: 200px;
    outline: 2px solid black;
    outline-offset: -16px;
}

- ITWitch

Answer 3

你可以使用伪元素 ：

HTML：

<div id="w"></div>

CSS:

#w{ width:300px;height:300px; background: grey;position:relative; }
#w:after{
    content:"";
    position:absolute;
    left:15px;
    top:15px;
    height:266px;
    width:266px;
    border: 2px solid black;
}

JSFiddle

- potashin

---

谢谢，我尝试了这个解决方案，它确实有效，但另一个答案更简单一些，还是谢谢你，这个解决方案也很好知道。 - Digital Brent