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.com/divcss/115.html
- 关注下 头条号后,请私信将免费分享给你一份web前端资料!
- 立即关注
- 美化css滚动条样式,就这么简单
- 在css中如何插入图片(详解img与background插入图片的差异)
- css图片自适应大小,css如何让图片布满
- reset.css模板,可参考下
- css图片不存在显示error(常用的两种解决方法)
- css圣杯布局详解(什么叫圣杯布局)
- css鼠标经过样式会动(两种方法实现鼠标经过样式改变)
- css隐藏滚动条可以滚动怎么实现?
- css3和css的区别是什么,css3的基本概念
- 常见css布局水平居中的6种方法