小编典典

仅在一个边界上勾勒轮廓

css

如何将 嵌入边框 应用于HTML元素,但仅在其一侧。到现在为止,我一直在使用图像(GIF /
PNG)执行此操作,然后将其用作背景并拉伸它(repeat-x),并从块的顶部移开一点。最近,我发现了 轮廓
CSS属性,这是伟大的!但是似乎将整个块都圈了起来…是否可以仅使用此边框属性在一个边界上执行此操作?另外,如果没有,您是否有任何CSS技巧可以代替背景图片?(以便稍后可以使用CSS等来个性化轮廓的颜色)。提前致谢!

这是要实现的目标的图像:http :
//exiledesigns.com/stack.jpg


阅读 349

收藏
2020-05-16

共1个答案

小编典典

大纲确实适用于整个元素

现在,我看到了您的图像,这是实现它的方法。

.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的默认值)才能起作用。如果不是这种情况,请提供完整的代码,以便我详细说明。

2020-05-16