前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

CSS如何实现每一行文本的虚线下划线

2017-07-21 10:29:50分类:HTML/CSS阅读(216)

 

方法一:如果要加虚线下划线的文本只有一行;
 
给文本加上 border-bottom:1px dashed #000;
 
 
方法二:用css背景图片平铺 repeat-x;
 
但此方法在移动端不好调试,因为移动端的多行文本行高是不固定的。
 
 
方法三:在文本css中加入 display: inline;和 border-bottom 属性,如下;
 
.p01 {
    border-bottom: 1px dashed #a2a2a2;
    display: inline;
    padding-bottom: 1px;    
}
 
display: inline;让文本有内联属性,使每一行都能实现虚线下划线。再用padding-bottom属性调下划线和文本间的距离。
 
 
方法三,是用css实现的最简单的方法。
 
原文链接:http://www.hqhtml.com/htmlcss/38.html,出自好切网(前端学堂),转载请注明出处。
标签:
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号