在完整边框CSS之间添加文本

Question

我正在尝试重新创建：

我已经添加了一个边框，我知道当它只是一个边界即底边时，如何打破内容的边界，然而，当边界是全方位的时候，当我打破这个边界时我很难过

到目前为止

代码：

.sharebox {
  display: block;
  float: left;
  background: #fff;
  width: 100%;
  padding-bottom: 0px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  margin: 30px 25px 10px 0px;
  border: 2px solid #777;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
}

<div class="sharebox">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</div>

是否可以在CSS中甚至使用JS执行此操作，还是必须使用图像？如果可能的话，它也需要响应。

Answer 1

您可以轻松使用<fieldset>和<legend>元素执行此操作：

＆＃13;

＆＃13;

legend {
  text-align: center;
}

＆＃13;

<fieldset>
  <legend>Share with your friends</legend>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用伪元素添加文本，并打破边框线设置它的背景颜色。

＆＃13;

＆＃13;

.sharebox {
  display: block;
  float: left;
  background: #fff;
  width: 100%;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  margin: 30px 25px 10px 0px;
  border: 2px solid #777;
  padding: 20px;
  position: relative;

}

.sharebox:before{
  content:'Some text in here.';
  padding:0 10px;
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  background:white;
}

＆＃13;

<div class="sharebox">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</div>

＆＃13;

＆＃13;

＆＃13;