今天遇到幾個虛線效果，不能一下子反應過來具體屬性。
一、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"/>
效果如圖： 