说到css的虚线样式，那么我们会联想到border的solid，在网页的布局里solid用的概率应该是最高的了，但是大家知道还有dotted虚线和ashed虚线吗？今天来给大家介绍这俩种属性做出虚线的方法。
讲到CSS虚线样式，应该会想到border的solid，网页布局中solid用的概率最高了，要有css虚线的效果还可以用图片做背，但是不推荐，尽量使用css虚线样式做这个虚线的效果，那么css虚线样式就是border中的dotted和dashed，这两种都是css虚线，但是他们是有区别的。
1.dotted虚线
<!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/><title>dotted虚线</title><style type="text/css">*{margin:100px;padding:0;}body{width:1000px;margin:0 auto;}.box{width:300px;height:50px;text-align:center;padding-top:30px;border:1px dotted #000;}</style></head><body><p>大家好，我是dotted虚线！</p></body></html>2.dashed虚线
<!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/><title>dashed虚线</title><style type="text/css">*{margin:100px;padding:0;}body{width:1000px;margin:0 auto;}.box{width:300px;height:50px;text-align:center;padding-top:30px;border:1px dashed #000;}</style></head><body><p>大家好，我是dashed虚线！</p></body></html>相信看了这些案例你已经掌握了方法，更多精彩请关注本站其它相关文章！
立即学习“前端免费学习笔记（深入）”；
相关阅读：
CSS3函数rotate()怎么使用
CSS3做出圆形风格面包屑代码实现步骤
前端项目里里定位几种方式
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）