CSS是前端開發(fā)者必須熟練掌握的技能之一。其中，文字在邊框線中間的樣式應(yīng)用較為廣泛，今天本文就來介紹一下如何實(shí)現(xiàn)這種效果。

.box{
border:1px solid #000;
padding:10px;
text-align:center;
width:200px;
}
.box p{
position:relative;
display:inline-block;
}
.box p:before{
content:'';
display:block;
position:absolute;
top:50%;
left:0;
right:0;
height:1px;
background-color:#000;
}

代碼解釋：

首先，我們創(chuàng)建一個(gè)包含邊框線和內(nèi)邊距的盒子，這個(gè)盒子的寬度和文本的長度應(yīng)該是相同的，否則會導(dǎo)致邊框線出現(xiàn)問題。然后，我們設(shè)置文本的對齊方式為居中，并使用了position:relative讓文本的偽元素的定位相對于文本本身。

接著，我們使用:before偽元素創(chuàng)建了一條寬度為1px、顏色為黑色的直線，這條直線的高度為50%（因?yàn)槲覀兿Ｍ谖谋镜闹虚g）。最后，我們將這條直線的左、右定位為零，并使它與文本水平居中。

總結(jié)：

通過這個(gè)例子，我們可以發(fā)現(xiàn)，在邊框線中間添加樣式是非常簡單的。重要的事情只有一條：你需要通過偽元素來添加直線，然后將它的位置正確對齊。那么，是不是很簡單呢？趕快去嘗試一下吧！