Silentash-默尘

dotted和dashed是几个Border-style类型里面最常用又是最容易被混淆的，从字面上我们可以知道dotted代表点线，dashed代表虚线，不过是怎样的点线和虚线，我们无从得知。W3C也仅仅是从字面上对这两者进行了定义和解释，如同讲废话一样将解释权踢给了各浏览器开发商。浏览器混乱的给出自己的解释，其中“造就”的罪过，最终降临在WEB开发者身上。

做dotted和dashed的测试是有些枯燥的，不过得出的结论却很有趣且实用，恰当的使用可以提高生产力，算是给某些奇技淫巧提供了科学依据。

测试的方法比较简单，给宽度为0（更紧凑些）的元素定义右边框，类型为dotted或者dashed，边框宽度和元素高度成正比增长，元素左边设置同宽度实线边框做对比，方便测算。

测试的目的主要是了解各浏览器中点线和虚线的计算方式及其他兼容性问题。

TC：Border-style

各浏览器测试截图（上半部分为点线，下半部分为虚线）

Ie6 :

不知是否开发人员不明白dotted为何物，IE6的1px点线竟然是虚线模样的

Ie7+ :

所有IE版本，边框样式与其方向上的长度有关，如纵向边框在其大小和高度成一定关系时消失不见

Firefox 3.5+ :

Opera 10 :

Chrome 3.0 :

Safari 4.0 (win) :

各浏览器按照其理解去渲染点线和虚线，对比了下，没有完全雷同的渲染方式，时候不早，直接上结论：

1. 所有浏览器在边框为1PX表现最为接近（IE6除外），大于1px的非实线千姿百态
2. 除Firefox和Opera，其他浏览器必含头尾点块，且平均分布
3. IE:点线与虚线均以边框宽度为基准，点线长度必须是其宽度的3倍以上（height>=border-width*3），虚线宽长度必须是其宽度的5倍以上（height>=border-width*5），否则点线和虚线都不会出现。
4. Firefox:点线以线宽为基准，间隔也为线宽，虚线的间隔则是线宽的3倍，不足则隐藏，所以Firefox的线是密度均衡的，但头尾连接不自然
5. Chrome在渲染1PX纵向边框时中间有明显粘连，虚线方式在大于1PX时的渲染方式同Safari
6. Safari和IE条件有点类似 ，点线需 height>border-width*3 ，虚线需 height>border-width*5 ，否则出现一溜实线。

结论中比较有用的是第三点，可以作为Hack技巧实现IE6的透明边框，前提是满足虚线框与高度或宽度的一定条件。最简单最实用的一个例子便是广为人知的Css border方式实现三角

.arrow{
    height:0;
    width:0;
    overflow:hidden;
    /*非IE6支持 transparent ，IE6用dashed边框模拟透明（此时border-width*5>height）
    border-left:5px dashed transparent;
    border-right:5px dashed transparent;
    border-bottom:5px solid #f00;
}

因dashed比dotted范围广，所以更推荐使用dashed方式模拟IE6下的透明边框。