今天遇到几个虚线效果，不能一下子反应过来具体属性。
一、dashed和dotted的区别
首先是dashed和dotted都是指“虚线”，但是两者显示的效果不尽相同。
从字面意思来看，
dashed：来自于 dash（破折号），故虚线是由一些破折号组成的，看起来会比较明显一些。
dotted：来自 于dot （点），故虚线由一些点组成的，也称点线，看起来是比较密。
<style>
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border-bottom:2px dotted #000;
}
.box1{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border-bottom:2px dashed #000;
}
</style>
<body>
<div class="box">用div做dotted虚线！</div>
<br/>
<div class="box1">用div做dashed虚线！</div>
</body>
效果如图：
二、border:none;和border:0;的区别
想起来查这两个的区别，主要是我虚线是用hr来做的，然后里面设置了border：none；就随手查一下。
一般设置边框属性，不想让边框出现可以设置border:none;或border:0;两种方法均可，它们的区别一般是有两种。
1.浏览器渲染时候的性能差异
解释它们的区别和display:none;与 visibility:hidden;的区别类似，
border:0; ——把border设为“0”，在页面上看不见，但解析按border默认值理解，浏览器依然对border-width和border-color进行了渲染，即已经占用了内存值。
border:none;——把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.浏览器兼容性的差异（没做测试，直接做的搬运工）
浏览器兼容性主要是针对IE6、IE7，并且只是对于button、input而言，设置border:none;无效，边框依然存在。
设置border:0;可以把边框隐藏。
三、用hr做虚线
<style>
.line{border: none;border-bottom:2px dotted #000 }
.line1{border: none;border-bottom:2px dashed #000 }
</style>
<p>用hr做dotted虚线</p>
<hr class="line"/>
<p>用hr做dashed虚线</p>
<hr class="line1"/>
效果如图： 
转载于:https://www.cnblogs.com/songForU/p/10484772.html
今天的文章关于css虚线分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/9630.html
