网页中经常用到的<hr / >标签的样式
一、横向
1.第一种
<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424113717573-1961651085.png)
2.第二种
<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424113802960-891229012.png)
3.第三种
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424113827680-1413312838.png)
4.第四种
<hr style="height:3px;border:none;border-top:3px double red;" />
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424113843747-236812021.png)
5.第五种
<hr style="height:5px;border:none;border-top:5px ridge green;" />
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114006175-964321848.png)
6.第六种
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114016422-519921644.png)
7.第七种
<hr style="filter:alpha(opacity=5,finishopacity=100,style=1);height:5px" color=green>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114026116-1662545010.png)
8.第八种
<hr style="filter:alpha(opacity=100,finishopacity=5,style=1);height:5px" color=blue>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114031364-2089127889.png)
9.第九种
<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:5px" color=orange>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114037406-2098665409.png)
10.第十种
<hr style="filter:alpha(opacity=0,finishopacity=100,style=3);height:5px" color=#FF00FF>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114042908-1956785206.png)
11.第十一种
<hr style="filter:alpha(opacity=100,finishopacity=0,style=2);height:5px" color=yellow>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114055428-1443528063.png)
12.第十二种
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);height:5px" color=#00FFFF>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114100813-1974410129.png)
13.第十三种
<hr style="filter:wave(strength=9,freq=2,lightstrength=20,phase=9);height:15px" color=pink width=95%>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114111553-354341797.png)
14.第十四种类
<hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 9px">
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114207601-2072436323.png)
15.第十五种
<hr style="border-top: 2px dashed; border-bottom: 2px dashed; height: 2px" color=black>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114230903-491358647.png)
二、竖向
1.第一种
<hr style="height:100px; width:4px" color=orange>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424114318612-505872734.png)
2.第二种
<hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=navy>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424115309065-979413148.png)
3.第三种
<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=red>
![](https://img2020.cnblogs.com/blog/1231314/202004/1231314-20200424115348607-1287678669.png)