通过文本以及围绕文本创建边框

Question

如何创建像这样在文本中移动而不遮盖文本的边框？

Answer 1

您可以通过将单词 "RELIABLE" 的背景颜色设置为与 div 相同的背景颜色来实现。然后使用负边距顶部可以定位文本，使其位于顶部边框。下面是我整理的一个简单示例。

HTML

<div id="blah">
  <h4>RELIABLE</h4>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
</div>

CSS

#blah {
  width: 180px;
  margin-top: 20px;
  border: 3px solid green;
  border-radius: 10px;
  text-align: center;
  font-family: arial;
}

#blah h4 {
  width: 100px;
  background: #fff;
  margin: -10px auto 0 auto;
  color: blue;
}

#blah p {
  color: red;
}

Answer 2

您可以使用 HTML fieldset 和 legend。这里的所有 CSS 内容都是完全可选的。

此外，legend 的 before 和 after 可用于在其文本附近设置 space。请注意，这样您就不会与背景重叠。

演示：

fieldset {
  display: inline-block;
  border-radius: 25px;
  color: #4b94ec;
  font-size: 25px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  border: 3px solid #848fa9;
}

legend {
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
}

legend:before,
legend:after {
  content: "";
  display: inline-block;
  width: 10px;
}

fieldset div {
  color: #b53f56;
}

<fieldset>
  <legend>Reliable</legend>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
  <div>More text here</div>
</fieldset>

Answer 3

举个例子。要指出的关键是 .title 跨度，它上面设置了 position: relative 和 top 以将其从流中的其他位置向上移动，并且 background-color 以阻止边框穿过文本。

.container {
    border: 3px solid blue;
    border-radius: 30px;
    width: 180px;
    padding: 0 30px;
    margin-top: 50px;
}

.title {
    color: blue;
    font-size: 35px;
    background-color: white;
    padding: 10px;
    position: relative;
    top: -20px;
}

p {
    color: red;
    font-size: 25px;
}

<div class="container">
    <span class="title">Reliable</span>
    <p>More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. </p>
</div>

Answer 4

您还可以查看 flex 属性和边距以将内容重置到位....

.mebox {
  display: inline-block;
  border: solid turquoise;
  padding: 0 1em 1em;
  margin: 1em;
  border-radius: 1em;
  border-top: none;
}

.mebox h4 {
  display: flex;
  text-align: center;
  justify-content: center;
  margin: 0 -2.1em 0;
  line-height: 0;
}

h4:before,
h4:after {
  content: '';
  flex: 1;
  height: 1em;
  border-top: solid turquoise;
  border-radius: 0 1em;
  margin: auto 1em;
}

h4:before {
  border-radius: 1em 0;
}

<div class="mebox">
  <h4>RELIABLE</h4>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
</div>

<div class="mebox">
  <h4>RELIABLE</h4>
  <p>More Text Here More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
  <p>More Text Here</p>
</div>

https://codepen.io/gc-nomade/pen/pwmmrd

通过文本以及围绕文本创建边框

Creating a Border through and also around text

html

css

border