html分割线

最新推荐文章于 2021-06-09 18:52:50 发布

原创最新推荐文章于 2021-06-09 18:52:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文展示了HTML中创建分割线的效果图，并提供了完整的代码示例，帮助理解如何在网页中实现视觉分隔。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分割线效果图

完整html代码如下

<!DOCTYPE html>
<html>
     <head>
           <meta charset= "utf-8" >
           <title >html分割线</title >
     </head >
     <body >
           <h3>1、两头渐变透明：</h3 >
           <HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 3 )" width ="80%" color =#987 cb 9 SIZE = 3>
           <h3>2、纺锤形：</h3>
           <HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 2 )" width ="80%" color =#987 cb 9 SIZE = 10>
           <h3>3、右边渐变透明：</h3 >
           <HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 1 )" width ="80%" color =#987 cb 9 SIZE = 3>
           <h3>4、左边渐变透明：</h3 >
           <HR style= " FILTER: alpha (opacity = 0, finishopacity =100 , style= 1 )" width ="80%" color =#987 cb 9 SIZE = 3>
           <h3>5、虚线：</h3>
           <HR style= " border: 1 dashed #987cb9" width ="80%" color =#987 cb 9 SIZE = 1>
           <h3>6、双线：</h3>
           <HR style= " border: 3 double #987cb9" width ="80%" color =#987 cb 9 SIZE = 3>
           <h3>7、立体效果：</h3>
           <HR style= " FILTER: progid:DXImageTransform.Microsoft.Shadow ( color: #987cb9 ,direction : 145, strength :15 ) " width = "80%" color = #987cb 9 SIZE= 1>
           <h3>8、钢针效果：</h3>
           <HR style= " FILTER: progid:DXImageTransform.Microsoft.Glow ( color= #987cb9 ,strength = 10) " width= "80%" color= #987 cb9 SIZE =1>
           <h3>９．垂直分割线</h3>
           <table border= "1px" cellpadding= "0" cellspacing= "0" style =" margin-left :200 px ;height : 265px ; border-left-style: solid ; border-bottom-style : none; border-right-style :none ; border-top-style: none ">
     </body >
</html>