HTML 几种特别分割线特效

r囧r小猫 2024-03-31 14:58 33阅读 0赞

![003dcd7a238bef77f68a744e18231f0d.jpeg][]

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

一、基本线条

--------------------

二、特效（效果并不是孤立的，可相互组合）  
1、两头渐变透明：  
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=\#987cb9 SIZE=3>

--------------------

2、纺锤形：  
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=\#987cb9 SIZE=10>

--------------------

3、右边渐变透明：  
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=\#987cb9 SIZE=3>

--------------------

4、左边渐变透明：  
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=\#987cb9 SIZE=3>

--------------------

5、虚线：  
<HR style="border:1 dashed \#987cb9" width="80%" color=\#987cb9 SIZE=1>

--------------------

6、双线：  
<HR style="border:3 double \#987cb9" width="80%" color=\#987cb9 SIZE=3>

--------------------

7、立体效果：  
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:\#987cb9,direction:145,strength:15)" width="80%" color=\#987cb9 SIZE=1>

--------------------

8、钢针效果：  
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=\#987cb9,strength=10)" width="80%" color=\#987cb9 SIZE=1>

--------------------

９．垂直分割线

<HR align=center width=300 color=\#987cb9 SIZE=1>  
align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[003dcd7a238bef77f68a744e18231f0d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3522af5c1abd4423a99fb280b3d99bf0.jpeg
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

HTML 几种特别分割线特效

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML 几种特别分割线特效

相关 [html代码] 几种美丽的分割线

相关 ios 横分割线纵分割线

相关 Android中几种图片特效的处理

相关大日志分割的几种方法

相关 linux 命令行分割字符串的几种方法

相关提升语义分割性能的几种方法

相关 HTML5特效动画

相关分割线

相关 HTML中画分割线