關於css虛線

居老師的狗子發表於2019-03-06
CSS

今天遇到幾個虛線效果，不能一下子反應過來具體屬性。

一、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"/>

　效果如圖：　

 

相關文章