HTML几种特别分割线特效-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了关于HTML几种特别分割线特效，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

HTML分割线特效，挺实用与漂亮的分隔线，需要的朋友可以参考下。

一、基本线条

二、特效（效果并不是孤立的，可相互组合）
1、两头渐变透明：

1	`<HR` `style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"` `width="80%"` `color=#987cb9` `SIZE=3>`

2、纺锤形：

1	`<HR` `style="FILTER: alpha(opacity=100,finishopacity=0,style=2)"` `width="80%"` `color=#987cb9` `SIZE=10>`

3、右边渐变透明：

1	`<HR` `style="FILTER: alpha(opacity=100,finishopacity=0,style=1)"` `width="80%"` `color=#987cb9` `SIZE=3>`

4、左边渐变透明：

1	`<HR` `style="FILTER: alpha(opacity=0,finishopacity=100,style=1)"` `width="80%"` `color=#987cb9` `SIZE=3>`

5、虚线：

1	`<HR` `style="border:1 dashed #987cb9"` `width="80%"` `color=#987cb9` `SIZE=1>`

6、双线：

1	`<HR` `style="border:3 double #987cb9"` `width="80%"` `color=#987cb9` `SIZE=3>`

7、立体效果：

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

8、钢针效果：

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

９．垂直分割线

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

1	`<HR` `align=center` `width=300` `color=#987cb9` `SIZE=1>`

align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者