关于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"/>

　效果如图：　

 

posted @ 2019-03-06 17:41  居老师的狗子  阅读(18641)  评论(0)  编辑  收藏  举报