Question

我有一个带填充的div，我想添加一个＆＃34;内部＆＃34;边界，考虑填充。例如，考虑使用此CSS：

div#border {
    padding:10px;
    border:1px solid;
    background-color:#ccc;
}

我在这种情况下的目标是创建一个内部实体边框，距离div边界10px，但我只得到一个外边框（jsFiddle）。添加内部div可以解决这个问题，但会添加一个额外的HTML元素（jsFiddle）：

div#border {
    padding:10px;
    background-color:#ccc;
}

div#internal {
    border:1px solid;
}

我尝试按照建议here添加大纲，但当我有两个带有大纲的adiacent div时，（jsFiddle）之间会有重叠。

是否有纯CSS解决方案来添加＆＃34;内部＆＃34;边界到div，考虑填充，没有添加额外的HTML元素，并且没有在adiacent div上重叠？

Answer 1

解决方案＃1使用带有插入的框阴影

我们可以利用多个值可用于box-shadow属性的事实。

这里的技巧是用div的背景颜色设置第一个内部阴影，用边框的颜色设置第二个内部阴影 - 稍微大一些。

＆＃13;

div#border {
  padding: 10px;
  box-shadow: inset 0 0 0 9px #ccc, inset 0 0 0 10px black;
  background-color: #ccc;
}

＆＃13;

<div id="border">some content</div>

＆＃13;

解决方案＃2使用带有`outline-offset`属性的大纲。

outline:1px solid;
outline-offset: -10px;

＆＃13;

div#border {
  padding: 10px;
  outline: 1px solid;
  outline-offset: -10px;
  background-color: #ccc;
}

＆＃13;

<div id="border">some content</div>

＆＃13;