CSS边框/大纲谁在文本行之上

Question

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

Answer 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>