CSS dashed和dotted的区别

html-css027

CSS dashed和dotted的区别,第1张

CSS中dashed和dotted区别如下：

1、组成虚线的方式不同：

两者在CSS中都是“虚线”。其中dashed来自 dash（破折号），由一个个破折号组成的虚线。dotted：来自 dot（点），由一个个点组成的虚线，也称点线。

2、在IE6.0中的表现区别：

在IE6.0中，宽度为1px的dotted和宽度为1px的dashed一样，表现为破折号组成的虚线。当宽度大于1px时，dotted表现为点组成的虚线。

3、在IE7.0中表现区别：

在IE7.0中，如果有4条1px宽度的边和其它任意数值宽度的边同时存在时，1px的dotted表现的和dashed一样，改变上述条件则表现为点组成的虚线。

参考资料来源：百度百科-CSS border-style

border线型主要有：

1、dotted【点状】

2、solid【实线】

3、double【双实线】

4、dashed【虚线】

实例一：如果一个CSS这样写：border-style:dotted solid double dashed出来的框就是：上边框是点状，右边框是实线，下边框是双线，左边框是虚线

实例二：如果一个CSS这样写：border-bottom:1px dashed #000000出来的框就是：一条宽度为1像素的黑色下划虚线。

以此类推。多试试就知道什么效果了哦。

1、可以用CSS中的边框实现，border是设置边框的属性，有一个属性dotted就是点划线。具体的设置方法，首先新建一个html文件，在文件内写入一个div标签，给它一个class属性demo：

2、设置demo的class样式，这里给demo一个宽度，表示点划线的长度，高度设为0，然后设置border-bottom的属性的边框样式为dashed点划线，宽度为5px，颜色为黑色，这样就设置好了：

3、打来浏览器，可以看到屏幕中的一条黑色点划线、以上就是用css实现点划线的流程：