CSS边框：距离对象边缘？

快问题我正在写出一些代码,如果有一种方法可以在对象中的5px的div上添加一个边框,而不是在div的实际边缘,那就好奇心.我检查了WC3,没有看到任何规格 – 但我可能错过了.

在我的情况下,我将使用div内的一个虚线边框5px,创建一个效果,如div已经被缝制到网站的其余部分.我可以很容易地使用背景图像来做,但是为什么在一两行css可以做的时候添加KB.

我会假设它会像“边界位置”或“边界距离”.

提前致谢.

解决方法

我从来没有遇到任何类似于这样的财产,所以我不得不说,简而言之,“不”.

但后来我觉得不好,所以我真的可以建议的是将你想要缝合的div包裹在另一个div中,并用相同的背景颜色来设计父母,以模拟你之后的样子.这里有一些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的“模糊”/“扩散”),使用与元素本身相同的背景颜色给出了边框在元素内的幻觉,而实际上它是从元素延伸出来的元素的阴影.

CSS边框：距离对象边缘？

解决方法

猜你在找的CSS相关文章