在填充内的 div 上添加内部边框

Question

我有一个带内边距的 div，我想添加一个“内部”边框，考虑到内边距。例如，考虑有这样的 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 的建议添加轮廓，但是当我有两个带有轮廓的相邻 div 时，(jsFiddle) 之间存在重叠。

是否有一种纯 CSS 解决方案可以为 div 添加“内部”边框，考虑填充，而不添加额外的 HTML 元素并且不会在 adiacent div 上重叠？

Answer 1

解决方案 #1 使用带有插图的 box-shadow

我们可以利用 box-shadow 属性可以使用多个值这一事实。

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

FIDDLE

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

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

解决方案 #2 使用带有 outline-offset 属性的轮廓。

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

FIDDLE

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

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