講到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>大家好，我是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>大家好，我是dashed虛線！</div></body></html>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS3函數rotate()怎麼使用
CSS3做出圓形風格麵包屑代碼實現步驟
前端項目裡裡定位幾種方式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
