通過文本創建邊框並在文本週圍創建邊框

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