css虚线样式dotted和dashed

讲到css虚线样式,应该会想到border的solid,网页布局中solid用的概率最高了,要有css虚线的效果还可以用图片做背景,但是不推荐,尽量使用css虚线样式做这个虚线的效果,那么css

   讲到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>

效果如下:

css虚线样式dotted和dashedcss虚线样式dotted和dashed

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>

效果如下:

css虚线样式dotted和dashed

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
前端

css中的这个letter-spacing属性,你应该知道

2022-11-26 1:26:10

前端

引入css的这4种方法你全用过吗?

2022-11-26 1:26:15

搜索