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

效果如图：