css虚线样式dotted和dashed

 分类:div+css教程时间:2017-04-11点击:

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

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虚线样式dashed

除注明外的文章,均为来源:(QQ:1917843637),转载请保留本文地址!
原文地址:
  • 一起学习,请加入web前端开发交流群:296358221
  • 立即加入