css 分割線樣式_css實現文章分割線的多種方法總結

這篇文章整理css如何實現文章分割線的多種方式，分割線在頁面中可以起到美化作用，那么就來看看使用css實現分割線樣式的多種方法。效果如下：

 

方式一：單個標簽實現分隔線：

html:

<div class="line_01">小小分隔線 單標簽實現</div>

css:

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

優點：代碼簡潔

 

方式二、巧用背景色實現分隔線：

html:

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

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:

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

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:  

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

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; }

51220網站目錄 https://www.51220.cn

方式五、利用字符實現分隔線：

html:

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

css: 

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

優點：代碼簡潔 以上簡單介紹了分隔線的寫法，也許還有其它比較合適的寫法，看環境各取所需吧！  

 

以上就是CSS實現分隔線的多種方法詳細講解的詳細內容 ,希望對大家的學習有所幫助。