HTML中横线的使用

m0_67846661

13750人浏览 · 2022-05-18 12:59:25

m0_67846661 · 2022-05-18 12:59:25 发布

height:2px;是hr的高度; 
border:none;是没有边框; 
border-top:2px dotted #185598;是设置横线的样式 
none：无样式；dotted：点线；dashed：虚线；solid：实线；
double：双线；groove：槽线；ridge：脊线；inset：内凹；outset：外凸;groove 上颜色  skyblue 下颜色。 
 .style-one /*内嵌水平线*/
 .style-two /*透明渐变水平线*/
 .style-three/*渐变*/
 
 1、点线:dotted
<hr style=" height:2px;border:none;border-top:2px dotted black;" />

 2、虚线:dashed
<hr style="height:1px;border:none;border-top:1px dashed blue;" />

 3、实线:solid
<hr style="height:1px;border:none;border-top:1px solid yellow;" />

 4、双线:double
<hr style="height:3px;border:none;border-top:3px double red;" />

 5、脊线:ridge
<hr style="height:5px;border:none;border-top:5px ridge green;" />

 6、槽线:groove
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />

 7、内凹:inset
<hr style="border:6 inset #ff0033" width="100%" SIZE=6>

 8、外凸:outset
<hr style="border:6 outset #ff0033" width="100%" SIZE=6>

9、两头渐变透明：
<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
<hr style="FILTER:borderLine (
width: 100px;height:2px;
background: -webkit-linear-gradient(left, #fff -4%, #333 50%, #fff 100%);">

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

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

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

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

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