3、列表型CSS虚线下划线 – TOP
常常他们碰到CSS LI的时候希望此CSS 列表样式每排内容下方为虚线分割开如下图
这里我们只需对LI设置底部边框为虚线边框即可。
首先我们是在对CSS初始化情况下设置CSS代码:
复制代码li{border-bottom:1px dashed #111;}即可实现li的列表型内容如上图虚线隔开效果(每个li内容底部为虚线边框)
还有我们常常碰见li的底部虚线很小就如一个点那么小,而border就很难实现了,这个时候我们需要一张虚线的点图片即可(一边高1像素宽3像素的1像素颜色图片即可实现)
对应CSS li代码:
复制代码Li{background:url(点图片路径) repeat-x 0 bottom}
这里不再详细演示我们在VIP也为大家详细介绍和演示制作各种li的CSS知识点。
4、CSS定义一条水平虚线 – TOP
这个很好理解同样可以使用对div对象设置边框虚线即可实现同时也可以对hr水平线标签设置虚线属性即可实现水平虚线分割线。
这里带过即可如下:
对div设置水平虚线线:
复制代码.divcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}
对应HTML代码:
复制代码<div class=”divcss5″></div>
对hr水平分割线设置属性:
第一种,hr标签内设置虚线属性:
复制代码<hr size=1 style=”color: blue;border-style:dashed ;width:100%”>
这里说明的是size为hr的值,一边设置为1即可。
第二种在css代码或CSS文件中定义hr的css属性
复制代码hr {border-top:1px dashed #00F ; }
对应html内hr标题代码:
复制代码<hr size=1>
这里是对hr设置边框为顶部或底部上下边任意一条边为1像素的蓝色虚线边框,同时设置hr的size为1,和第一种值大致相同,唯一区别在于当在html中出现了hr标签,hr标签属性就为css设置,如果网页多次出现可以减少代码量。
以上所有的CSS虚线涉及了css borer、CSS 下划线、CSS 背景等知识,希望大家能掌握各种方法设置DIV虚线、虚线边框、DIV CSS虚线下划线的方法。










