说到CSS的虚线样式,那么我们会联想到border的solid,在网页的布局里solid用的概率应该是最高的了,但是大家知道还有dotted虚线和ashed虚线吗?今天来给大家介绍这俩种属性做出虚线的方法。
讲到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虚线!
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虚线!
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读: