• HR+CSS 分割线


     

    实心线:<HR align=left width=490 color=#990099 SIZE=3 noShade> 

     

    竖直线:<HR align=center width=1 color=red size=100> 

    虚线:<hr size=1 style="color: blue;border-style:dotted;490px;color:#CCC"> 


    双线:<hr size=1 style="COLOR:#ff9999;border-style:double;490px;color:#CCC"> 


    立体: <hr size=8 style="COLOR: #ffd306;border-style:outset;490px;color:#CCC"> 


    左边逐渐变透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100);490;"> 

    右边逐渐变透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0);490;"> 

    样式: 

    代码如下: 

    <hr STYLE="WIDTH: 100%; COLOR: #999; BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; HEIGHT: 1px; BORDER-BOTTOM-STYLE: dashed"></HR> 


    用<hr>标签 
    最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade> 
    其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度; 
    align 规定线条位置,有left(左对齐)、right(右对齐)、center(中对齐);noshade 表示是否有立体效果。 

    两头渐变透明: (利用CSS滤镜处理) 
    <hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"> 

    右边渐变透明: 
    <hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=1)"> 
    画虚线: 
    <hr width=80% size=1 color=#5151A2 style="border:1 dashed #5151A2"> 

    画双线: 
    <hr width=80% size=3 color=#5151A2 style="border:3 double green"> 

    立体效果: 
    <hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Shadow(color#5151A2,direction:145,strength:15)"> 

    纺棰形: 
    <hr width=80% size=30 color=#5151A2 style="filter:alpha(opacity=100,finishopacity=0,style=2)"> 

    钢针效果: 
    <hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#5151A2,strength=10)"> 
    也可以利用<table>标签 
    如<table width="100%"><tr><td height="1" bgcolor="#FF0000"></td></tr></table>或者利用CSS里的background属性,更方便控制划线效果,比如像一个一像素的点(dot.gif) 
    水平划线:<td style="background:url(dot.gif) repeat-x center">&nbsp;</td> 
    垂直划线:<td style="background:url(dot.gif) repeat-y center">&nbsp;</td> 
    当然还有其他很多方法,大家可以参考HTML及CSS相关资料
  • 相关阅读:
    何为优秀的前端?
    CSS清除浮动的三个方法
    CSS3 速查手册
    高性能JavaScript
    chrome开发者工具使用
    AndroidJetpack数据处理之数据库Room和懒加载Paging
    AndroidJetpack Fragment之Navigation和ViewPager2
    第一行代码之菜单
    Day1
    1.16 24点游戏
  • 原文地址:https://www.cnblogs.com/yqskj/p/2758648.html
Copyright © 2020-2023  润新知