Html 是否可以仅使用一个div在填充内部放置边框？

我只是想知道是否有人知道一种只使用一个div来获得镶嵌边框效果的方法？还是我必须用两个？我的意思是：

我目前正在使用一个带边框的div，它被包装在一个带填充的div中。我必须在心理上跟踪哪些包内包装和哪些包外包装。我只想在页面上添加如下所示的on元素：

而不是必须使用两个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;
}

---

是否可以将其简化为一个元素，或者我必须使用一个外部元素包裹内部元素？

您可以使用伪元素：

HTML:

试试这个

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

---

请参见

您所需要的只是CSS轮廓偏移量的惊人性属性：

这里有一个

CSS:

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

---

谢谢我甚至不知道css属性的存在！谢谢，虽然我尝试了这个解决方案，它确实奏效了，但另一个答案稍微简单了一点，不过谢谢，知道这个仍然很好。

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

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