CSS 边框 : Distance from Object Edge?

Question

快速提问。我正在写一些代码，很好奇是否有办法在对象内的 5px 的 div 上添加边框——就像不在 div 的实际边缘上一样。我检查了 WC3 并没有看到任何规范 - 但我可能错过了它。

在我的例子中，我会在 div 内部使用虚线边框 5px，以创建一种效果，就像 div 已被缝合到网站的其余部分一样。我可以用 background-image 很容易地做到这一点，但是为什么要在一行或两行 css 可以做到的情况下添加 KB。

我假设它会类似于“border-position”或“border-distance”。

提前致谢。

Answer 1

我从来没有遇到过任何类似的属性(property)，所以我不得不简单地说，“没有。”

但是我会为此感到难过，所以我真正能建议的是将您希望“缝合”的 div 包装在另一个 div 中并设置样式parent 具有相同的 background-color 以模拟您想要的外观。这里有一些可能的 CSS:

.wrap {
    border-width: 0;
    background-color: #ffa;
    width: 50%;
    padding: 0.5em;
}

.wrap #panel {
    background-color: inherit;
    height: 6em;
    border: 5px dashed #f90;
    text-align: center;
}

还有一些 html:

<div class="wrap">
    <div id="panel">
        <p>This panel should look kinda sewn-on.</p>
    </div>
</div>

最后，A JS Fiddle demo

好吧，刚刚重新发现了这个答案(感谢投票者!)，现在我可以使用 box-shadow 提供一个实际的纯 CSS 无无关元素的解决方案:

#panel {
    background-color: #ffa;
    height: 6em;
    border: 5px dashed #f90;
    text-align: center;
    width: 50%;
    margin: 30px auto 0 auto;
    box-shadow: 0 0 0 15px #ffa;
}​

JS Fiddle demo .

第四个参数是关键，它定义了阴影的“扩散”(第三个参数定义了“模糊度”/“扩散度”，在本例中为 0)，使用与元素本身相同的 background-color 给人一种错觉，即 border 在元素内，而实际上它是元素的阴影从< 元素。