CSS 边框虚线 dotted 与 dashed 的区别及跨浏览器渲染差异

在 CSS 边框样式中，dotted 与 dashed 都常被泛称为“虚线”，但两者的几何形态与规范定义截然不同。本文解析两者在现代浏览器中的标准表现。

一、 核心几何差异

• dashed（破折线/长虚线）： 由一系列等间距的短矩形线段组成；
• dotted（圆点线/点状线）： 在 W3C 标准中定义为由一系列圆点（Dots）组成。在现代 WebKit/Blink 浏览器中，dotted 会渲染为精致的实心小圆点。

二、 样式演示代码

/* 长虚线边框 */
.box-dashed {
    border: 2px dashed #3498db;
}

/* 点状边框 */
.box-dotted {
    border: 2px dotted #e74c3c;
}