css虚线样式dotted和dashed
讲到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> <div class="box">大家好,我是dotted虚线!</div> </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> <div class="box">大家好,我是dashed虚线!</div> </body> </html>
效果如下:
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/divcss/115.html
原文地址:https://tangjiusheng.cn/divcss/115.html