仅使用一个 div 就可以在填充内部放置边框吗？

Question

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

我目前使用的是带边框的 div，包裹在带填充的 div 中。我必须在心里跟踪哪个 in_wraps 和哪个 out_wraps 一起去。我只想在页面上添加如下所示的元素：

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

是否可以将其减少到只有一个元素，或者我是否必须坚持使用包裹在内部元素周围的外部元素？

Answer 1

你可以使用伪元素:

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

Answer 2

试试这个：

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

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

Answer 3

你所需要的只是 CSS outline-offset 属性:

这里是JSFiddle sample.

CSS:

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

仅使用一个 div 就可以在填充内部放置边框吗？

Possible to place border on inside of padding using only one div?

html

css

border