Question

如何在不掩盖文字的情况下创建一个像这样的文字移动的边框？

Answer 1

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

同样legend的{{1}}和before可用于在文本附近设置空间。请注意，这样您就不会重叠背景。

演示：

after

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;
}

Answer 2

这是一个例子。需要指出的关键是.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 3

您可以通过将单词“RELIABLE”的背景颜色设置为div的相同背景颜色来完成此操作。然后使用负边距顶部，您可以定位文本，使其位于顶部边框。下面是我放在一起的一个简单示例。

https://codepen.io/anon/pen/yXWrbe

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

通过文本创建边框

4 个答案: