CSS實現分隔線的多種方法詳細講解

本篇文章講述了css如何?分隔線的多種方法，我們在寫前端頁面的時候分隔線可以起到美觀作用，css實現分隔線的方法有多種，那麼我們就一起來看看使用css如何?分隔線更美觀點吧！

單個標籤實現分隔線：

html:

<p class="line_01">小小分隔線 單標籤實現</p>

css:

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

優點：代碼簡潔

巧用背景色實現分隔線：

html:

<p class="line_02"><span>小小分隔線 巧用色實現</span></p>

css:

.demo_line_02{    height: 1px;    border-top: 1px solid #ddd;    text-align: center;}.demo_line_02 span{    position: relative;    top: -8px;    background: #fff;    padding: 0 20px;}

優點：代碼簡潔，可自適應寬度

inline-block實現分隔線：

html:

<p class="line_03"><b></b><span>小小分隔線 inline-block實現</span><b></b></p>

css:

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

浮動實現分隔線：

html:

<p class="line_04"><b></b><span>小小分隔線 浮動來實現</span><b></b></p>

css:

.demo_line_04{    width:600px;}.demo_line_04{    overflow: hidden;    _zoom: 1;}.demo_line_04 b{    background: #ddd;    margin-top: 8px;    float: left;    width: 26%;    height: 1px;    _overflow: hidden;}

利用字元實現分隔線：

html:

<p class="line_05">———————————<span>小小分隔線 字元來實現</span>————————————</p>

css:

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

優點：代碼簡潔 以上簡單介紹了分隔線的寫法，也許還有其它比較合適的寫法，看環境各取所需吧！
只有對比才能發現誰更好，大家可以將這些代碼都實現一遍，進行個對比！

相關推薦：
css怎麼設定分隔線與雙實線

如何使用CSS實現分隔線