CSS dashed和dotted的区别

发布网友

我来回答

共4个回答

热心网友

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

热心网友

css中dashed是由多个短横线组成的虚线，dotted是由多个点组成的虚线。

1、新建html文档，在body标签中添加两个div标签，为这两个div标签设置一些样式：

2、为第一个div标签设置边框，其中边框样式为“dashed”，这时可以发现边框是多个短横线形成的虚线：

3、为第二个div标签设置边框，其中边框的样式为“dotted”，这时可以发现边框是有多个点形成的虚线：

热心网友

CSS中dashed和dotted的区别：

    首先，从字面上来理解，dashed 和 dotted 都是指“虚线”，他们的不同在于： 
dashed：来自 dash（破折号），由 dash 组成的虚线 
dotted：来自 dot （点），由 dot 组成的虚线，也称点线 
   
    下面再说说相关的 bug ，此处涉及到 IE6 和 IE7。 
Bug1: 在 IE6 下，1px 宽的 dotted 表现的和 dashed 一样。当宽度大于 1px 时，表现正常。 
    

Bug2:在 IE7 下，当 4 条边的宽度是 1px 和 其它任意数值共存时，1px 的 dotted 表现的和 dashed 一样。4 条边的宽度全为 1px，或者为其它不是 1px 的不同值时不会出现这个 bug。

Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 边框，在拖动页面时，有时候边框会连成实线，有时候会出现缺口。

要解决这些 bug，要么直接就不用 dotted 而直接用 dashed；要么用图片代替；要么用额外标签和代码来解决。

鉴于只有在边框宽度为 1px 时才会出现这些 bug，可以设置外包围标签的边框宽度为 2px，通过增加一个内标签，设置其为 1px 的内容背景色边框，再通过设置 margin-top/right/bottom/left: -1px; 来盖掉外包围标签的 1px 边框，从视觉上实现正常效果。

热心网友

显示出来的样式不一样

上面两条线都是2像素的，第一条是dashed的效果，第二条是dotted的效果