通过文本创建边框并在文本周围创建边框

Question

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

Answer 1

可以使用HTML fieldset这与legend。这里所有的CSS东西都是可选的。

另外legend的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; 
 
}

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

您可以通过单词“可靠”的背景颜色设置到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 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

你也可以看看柔性特性和利润率上进行复位的事情....

.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