时间：2021-07-01 10:21:17 帮助过：184人阅读
css虚线样式实现方式一：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>dotted虚线显示效果：
css虚线样式二：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>dashed虚线显示效果：
css虚线样式border中的dotted和dashed区别：
dashed：来自 dash（破折号），由 dash 组成的虚线
dotted：来自 dot （点），由 dot 组成的虚线，也称点线
上面的演示也能直观的看出来他们的区别
相关推荐：
常见的CSS 虚线实例教程
怎么用css写虚线边框
以上就是实现css虚线样式的两种方式：dotted和dashed（实例）的详细内容，更多请关注Gxl网其它相关文章！