如何将 嵌入边框 应用于HTML元素,但仅在其一侧。到现在为止,我一直在使用图像(GIF / PNG)执行此操作,然后将其用作背景并拉伸它(repeat-x),并从块的顶部移开一点。最近,我发现了 轮廓 CSS属性,这是伟大的!但是似乎将整个块都圈了起来…是否可以仅使用此边框属性在一个边界上执行此操作?另外,如果没有,您是否有任何CSS技巧可以代替背景图片?(以便稍后可以使用CSS等来个性化轮廓的颜色)。提前致谢!
这是要实现的目标的图像:http : //exiledesigns.com/stack.jpg
大纲确实适用于整个元素。
现在,我看到了您的图像,这是实现它的方法。
.element { padding: 5px 0; background: #CCC; } .element:before { content: "\a0"; display: block; padding: 2px 0; line-height: 1px; border-top: 1px dashed #000; } .element p { padding: 0 10px; } <div class="element"> <p>Some content comes here...</p> </div>
(或查看 外部演示。)
所有尺寸和颜色都只是占位符,您可以对其进行更改以匹配所需的确切结果。
重要说明 :.element必须具有display:block;(div的默认值)才能起作用。如果不是这种情况,请提供完整的代码,以便我详细说明。
display:block;