積跬步，聚小流-------幾種方法實現分割線

標籤：分割線   前端   html   

其實這個問題想了實現了有一段時間了，只是單純自己想了個辦法簡單實現了效果，沒想出太多辦法來，最關鍵的是，我也不知道這原來是叫“分割線”，只知道是什麼樣，連搜都不著知道怎麼搜，趕巧今天碰到了，就學習了下，先來描繪下要實現的“分割線”效果。

對，就是這個效果，記住了，這叫“分割線”...

最開始反應過來的是層疊起來實現效果，也是之前一直在用的方法

<hr width="80%"/><div style="position: relative;top: -40px;background-color: white;width: 200px;"><h1>登 錄</h1></div>

今天又學習了另外幾個方法，小有收穫

<div class="line_divide"><h1>登 錄</h1></div>

然後進行樣式設定

.line_divide{    padding: 0 20px;    margin: 0 80px 0;    line-height: 1px;    border-left: 240px solid #ddd;    border-right: 240px solid #ddd;    text-align: center;}

這個看起來是不是很高大上啊，再來看個更簡潔的

<div class="line_divide">———————————<span><h1>登 錄</h1></span>————————————</div>

一般來說，最先反應過來的是不是都是直接加“-”就好了呢，但是沒辦法“-”和“-”之間總有一些間隔，這就美中不足了，但是如果中間的間隔空隙沒有了呢，然後就學到了一個新的樣式

.line_divide{    letter-spacing: -3px;    color: #ddd;}.line_divide span{    letter-spacing: 0;    color: #222;    margin:0 20px;}

letter-spacing:字母間距，所有瀏覽器都支援，允許為負值，可以為預設值、設定固定值和父類繼承的值（不相容IE），w3cschool就是這麼寫的，好東西啊。

雖然說這幾個方法已經很好的達到了所想要的需求，但是同時看到了一個麻煩點，但是也學到了不少東西的一個方法：

<div class="line_divide"><b></b><span><h1>登 錄</h1></span><b></b></div>

再來看下它的樣式

.line_divide{    width:600px;}.line_divide b{    background: #ddd;    margin-top: 4px;    display: inline-block;    width: 180px;    height: 1px;    _overflow: hidden;    vertical-align: middle;}.line_divide span{    display: inline-block;    width: 220px;    vertical-align: middle;    text-align: center;}

這是看到的原代碼，裡面看到了兩個非常棒的樣式啊，vertical-align和display:inline-block，突然彷彿回到了剛開始學習的時候，都用過的啊，用在這裡，妙不可言啊

要睡了，這屋裡沒有暖氣真要人命啊，感覺手要凍了...

積跬步，聚小流-------幾種方法實現分割線