位于一行文本之上的 CSS 边框/轮廓答案

【问题标题】：CSS border/outline who goes on top of a line of text位于一行文本之上的 CSS 边框/轮廓
【发布时间】：2016-10-21 11:46:10
【问题描述】：

有人可以建议我如何在我附加的图像上实现边框/轮廓。我尝试了很多东西，但仍然没有成功。

【问题讨论】：

那个设计看起来很奇怪（如果还不错的话），但你可以通过绝对定位文本来实现。
您的 CSS 似乎出了点问题。不要那样做。
欢迎来到 Stackoverflow！在提出任何问题之前，请阅读stackoverflow.com/help/how-to-ask。

标签： css border outline

【解决方案1】：

您可以通过在页眉上使用负边距来实现。

不是我选择的设计，但可能是。

* { margin: 0; padding: 0; }
body {
  padding: 1em;
}
div {
  padding: 1em;
  border: 1px solid black;
}
h3 {
  margin-top: -1.5em;
  margin-bottom: 1em;
  border-bottom: 1px solid black;
}
p {
  border-left: 1px solid black;
}

<div>
  <h3>Chapter</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales velit non ligula dictum, vitae sagittis diam maximus. Vivamus finibus, nibh sed fringilla accumsan, mi neque convallis lorem, et viverra quam libero vel risus. Maecenas varius blandit dui, et suscipit massa sodales tincidunt. Donec at dui blandit, sollicitudin elit nec, tincidunt dui. Aenean facilisis tellus et velit mollis, nec efficitur lacus volutpat. Proin dapibus odio sem, fringilla ullamcorper tellus porta eget. Nunc sed egestas enim, eget gravida urna.</p>
</div>

【讨论】：

非常感谢！做得好。如果我的问题太基本，我向其他人道歉。再次感谢您！