css多行文本底部虚线效果代码实例
分类:实例代码
很多时候,文本底部有一条虚线,如果是单行的话非常简单,使用虚线边框即可实现。
但是如果多行文本同样使用边框,代码也同样简单。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> .box { margin: 50px auto; padding: 20px 30px; width:300px; border: 1px solid black; } .box span { line-height: 30px; padding-bottom: 5px; border-bottom: 1px dashed #ccc; } </style> </head> <body> <div class="box"> <span>欢迎来到犀牛前端部落,本站的url地址是www.pipipi.net,欢迎提供有益的建议与意见。</span> </div> </body> </html>
关于line-height用法可以参阅css的line-height属性用法深入介绍一章节。
css多行文本底部虚线效果代码实例,这样的场景在实际项目中还是用的比较多的,关于css多行文本底部虚线效果代码实例就介绍到这了。
css多行文本底部虚线效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。
网站出售中,有意者加微信:javadudu