CSS dashed和dotted的区别

近期我在设计网页时遇到了一个问题，原本想用边框（border）来模拟设计图中的虚线效果，但实际效果与设计图相比显得有些逊色。于是我开始研究 dashed 和 dotted 之间的差异。

从字面意义上来看，dashed 和 dotted 都是指“虚线”，但它们的表现形式有所不同。dashed 是由连续的破折号（dash）组成的虚线，而 dotted 则是由点（dot）组成的虚线，也被称为点线。

在尝试使用这两种虚线效果时，我遇到了一些在 IE 浏览器（尤其是 IE6 和 IE7）中的 bug。这里我简单描述一下：

Bug1：在 IE6 下，当使用宽度为 1px 的 dotted 虚线时，其表现与 dashed 虚线无异。但当宽度大于 1px 时，表现正常。

Bug2：在 IE7 下，当四条边的宽度同时存在 1px 和其他任意数值时，1px 的 dotted 表现与 dashed 相同。只有当四条边的宽度均为 1px 或其他非 1px 的值时，这个 bug 才不会出现。

Bug3：在 IE6 下，使用宽度为 1px 的 dotted 或 dashed 边框时，拖动页面时边框有时会变成实线，有时则会出现缺口。

为了解决这些 bug，我有几种建议：一是尽量避免使用 dotted 而选择使用 dashed；二是用图片代替边框设计；三是使用额外的标签和代码来解决视觉问题。考虑到这些 bug 只出现在边框宽度为 1px 的情况下，我们可以设置一个外包围标签的边框宽度为 2px，然后增加一个内标签，设置其为 1px 的内容背景色边框，再通过调整 margin 来覆盖外包围标签的 1px 边框，从而在视觉上实现正常效果。虽然这个方法有些繁琐，但在没有其他更好的解决方案时，我们只能接受这种无奈的选择。

CSS样式代码如下：

```css

.b6 {

border: 2px dotted 000;

padding-top: 0;

}

.b6 ner {

border: 1px solid 9c9c9c;

width: 100%;

height: 100%;

margin: -1px;

position: relative;

z-index: 100;

}

```

在网页开发中，我们时常会遇到各种挑战和难题，但只要我们不断和学习，总会找到解决问题的方法。希望这篇文章能对你有所帮助。