做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下的透明边框。

Comments

• 2009年12月29日, ivershuo writes: RT: @nunumick: New blog post: Dotted&Dashed终极分析及IE6透明边框 http://www.silentash.com/blog/2009/241.html //这个发现甚有意义
• 2009年12月29日, Rainoxu writes: 哥哥我第一个来顶你，鸡冻吧~~~嘎嘎
• 2009年12月29日, nunumick writes: @Rainoxu，这是我切换Blog之后的第一帖，很有意义，很鸡冻
• 2009年12月29日, Mick writes: 有用的 IE6 hack
• 2009年12月29日, 渔隐 writes: Coding Test @nunumick :

  alert('hello world');

• 2010年01月22日, 开发当中遇到的CSS问题 - Hi, I’m Adam Lu. writes: [...] 6.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; } 详情请看淘宝UED渔隐的这篇文章http://blog.silentash.com/2009/12/ie6-border-transparent/ [...]
• 2010年03月13日, 张鑫旭 writes: “css border方式实现三角”方法广为人知吗？看来，我要学的还有很多啊！
• 2010年08月9日, dexbol writes: 有个不方便的地方是：height>=border-width*5 ，这里的"height"是"offsetHeight"
• 2010年08月10日, webstudy.tk writes: [...] 说明： 以上的测试代码纯粹为了说明原理，所以使用#ffffff白色边框，通过于背景融合来隐藏边框。在实际的操作中，应该使用transparent透明属性，例如border-color:#ff3300 #ff3300 transparent transparent;，这同样会有问题，IE6浏览器不支持transparent透明属性，不过没有关系，就border生成三角技术而言，直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题，为什么使用dotted和dashed可以修复此问题呢？您有兴趣可以参见默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框。 [...]