這篇文章將為大家詳細講解有關HTML如何實現分割線特效 ，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、基本線條

二、特效（效果并不是孤立的，可相互組合）
1、兩頭漸變透明：

<HRstyle="FILTER:alpha(opacity=100,finishopacity=0,style=3)"width="80%"color=#987cb9SIZE=3>

2、紡錘形：

<HRstyle="FILTER:alpha(opacity=100,finishopacity=0,style=2)"width="80%"color=#987cb9SIZE=10>

3、右邊漸變透明：

<HRstyle="FILTER:alpha(opacity=100,finishopacity=0,style=1)"width="80%"color=#987cb9SIZE=3>

4、左邊漸變透明：

<HRstyle="FILTER:alpha(opacity=0,finishopacity=100,style=1)"width="80%"color=#987cb9SIZE=3>

5、虛線：

<HRstyle="border:1dashed#987cb9"width="80%"color=#987cb9SIZE=1>

6、雙線：

<HRstyle="border:3double#987cb9"width="80%"color=#987cb9SIZE=3>

7、立體效果：

<HRstyle="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%"color=#987cb9SIZE=1>

8、鋼針效果：

<HRstyle="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%"color=#987cb9SIZE=1>

９．垂直分割線

<tableborder="1px"cellpadding="0"cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top
-style:none">

<HRalign=centerwidth=300color=#987cb9SIZE=1>

align 線條位置（可選left、right、center）；width 線條長度；color 顏色；size 厚度

總結

以上是生活随笔為你收集整理的HTML如何实现分割线特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。