html - 在标题和段落周围放置边框

Question

我试图在标题和段落周围放置一个边框。目前我在标题和段落周围有两个单独的边框。我怎样才能在它们周围放置一个边框？

<style type="text/css">
h1{
 font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
p{
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
</style>

<h1>Hello</h1>
<p>World</p>

Answer 1

就像 Harry 上面建议的那样，只需将它们添加到包装器中，然后在包装器上设置您的样式即可。像这样:

div {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}

<div>
  <h1>Hello</h1>
  <p>World</p>
</div>

---

或者，如果您不能或不想更改您的标记，您可以简单地删除左下角和右下角的 border 和 border-radius 为您的 h1 元素，同时删除 p 元素的左上角和右上角的 border 和 border-radius。这也将产生您正在寻找的外观。

h1, p {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
  margin: 0;
  padding: 10px 0;
}

h1 {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

p {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

  <h1>Hello</h1>
  <p>World</p>