CSS border/outline 谁在一行文本之上

Question

有人可以告诉我如何实现 borders/outline 就像我附加的图像一样。我尝试了很多东西，但仍然没有成功。

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>

CSS border/outline 谁在一行文本之上

CSS border/outline who goes on top of a line of text

css

border

outline