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

Question

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

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

我认为它会像"边界位置"或"边界距离".

提前致谢.

Answer 1

我从未遇到任何类似于此的财产,所以我不得不说,简单地说,"不."

但是那时我会感觉很糟糕,所以我真正建议的是把div你希望"缝制"在另一个内部,div并用同样的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演示

好的,刚刚重新发现了这个答案(感谢上选人!),我现在可以提供一个实际的CSS-only-extraneous-elements解决方案,使用box-shadow:

#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小提琴演示.

第四个参数是关键,它定义阴影的"spread","扩散"(第三个参数定义了'模糊'/'扩散',在这种情况下是0),使用与background-color元素本身相同的幻觉的border是元素中,而它实际上是延伸出元素的影子从元素.