css虚线样式dotted和dashed

Joker • • 前端笔记 • 278 阅读

   讲到css虚线样式，应该会想到border的solid，网页布局中solid用的概率最高了，要有css虚线的效果还可以用图片做背景，但是不推荐，尽量使用css虚线样式做这个虚线的效果，那么css虚线样式就是border中的dotted和dashed，这两种都是css虚线，但是他们是有区别的。

1.dotted虚线





dotted虚线

*{
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;
}



大家好，我是dotted虚线！

效果如下：

css虚线样式dotted

2.dashed虚线





dashed虚线

*{
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;
}



大家好，我是dashed虚线！

效果如下：

css虚线样式dashed