快问题我正在写出一些代码,如果有一种方法可以在对象中的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>
好的,刚刚重新发现了这个答案(感谢上传者!),现在我可以使用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; }
第四个参数是键,它定义了阴影的“呃”,“扩散”(第三个参数定义了在这种情况下为0的“模糊”/“扩散”),使用与元素本身相同的背景颜色给出了边框在元素内的幻觉,而实际上它是从元素延伸出来的元素的阴影.