列表型CSS虚线下划线实现方法

发布时间:2020-06-24编辑:脚本学堂
我们制作网页列表时,为了用户的体验往往在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}
 

这里不再详细演示了,方法很简单,大家可以做一页面测试下。