Question

快速提问。我正在写出一些代码，如果有一种方法可以在对象内的5px的div上添加边框，那就很奇怪了 - 就像在div的实际边缘上一样。我检查了WC3并没有看到任何规格 - 但我可能错过了它。

在我的情况下，我将在div中使用虚线边框5px来创建一个效果，就像div被缝到了网站的其余部分一样。我可以使用background-image相当容易地完成它，但是为什么在一行或两行css时可以添加KB。

我认为它会像“border-position”或“border-distance”。

提前致谢。

Answer 1

我从未遇到任何类似于此的财产，所以我不得不说，简单地说，'不。'

但是那时我感觉很糟糕，所以我真正建议的是将div包裹在另一个div中你想要'缝合'并用同一个{{{ 1}}模仿你所追求的外观。这里有一些可能的css：

background-color

还有一些HTML：

.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;
}

最后，A JS Fiddle demo

好的，刚刚重新发现了这个答案（感谢上选人！），我现在可以使用<div class="wrap"> <div id="panel"> <p>This panel should look kinda sewn-on.</p> </div> </div>提供一个实际的CSS无外部元素解决方案：

box-shadow

JS Fiddle demo

第四个参数是关键，它定义阴影的“spread”，“展开”（第三个参数定义'模糊'/'扩散'，在本例中为#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; }），使用相同的0因为元素本身给出了background-color在元素内的幻觉，而它实际上是元素的阴影，从元素延伸出来。

Answer 2

这就是IE在quirks模式下所做的事情。使用CSS3 box-sizing，您可以在两种模式之间切换，但我不确定目前是如何支持的有关更多信息，请参阅http://www.quirksmode.org/css/box.html。

CSS边框：距对象边缘的距离？

2 个答案: