实现兼容性的CSS粗虚线边框(dashed)效果

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=822

一、dashed粗虚框的不兼容问题

CSS border-style属性中，有一个非常常用的属性，就是dashed，用来形成虚框。平时我们使用的宽度多半是1像素，所以其中的差异不细究，也不易觉察。但是，如果边框的宽度(border-width)大于1像素，那么不同浏览器下的表现差异就比较明显了。我们可以举一个非常简单的例子，参见下面的测试代码：

.border_dashed{
    width:260px;
    height:180px;
    border:2px dashed red;
    background:yellow;
}

结果在各个浏览器下的表现如下：
实现兼容性的CSS粗虚线边框(dashed)效果

可以看到，IE浏览器下，对于2像素的虚框是采用的4-2-4-2的形式重复下去的，且转角等宽相连；Firefox和Chrome浏览器都是 6-6-6-6的形式重复虚边框的，虚框起点的处理上，Firefox似乎是从实框顶端开始平铺，而Chrome则似乎不是；最后是Opera浏览器，虽然Opera浏览器与IE一样是实线:空白 = 2:1的形式平铺的，但是Opera浏览器的平铺宽度却比IE要大，与Chrome等相同，为6-3-6-3。基本上每种浏览器都有差异。

您可以狠狠地点击这里：2px dashed虚框的表现

在这种情况下，我们要实现兼容性的虚框效果，怎么办呢？在过去，我们可以只能找个模子切个整个边框图了，但是现在，随着浏览器的发展，我们有了更加上乘的扩展性强的兼容性方法。

本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活(http://www.zhangxinxu.com/wordpress/)

本文地址：http://www.zhangxinxu.com/wordpress/?p=822 访问原出处，更多你未见过的前端技术。

二、使用CSS3实现兼容性的border虚框效果

CSS3的潜力是巨大的，而且有时候可以成为我们解决兼容性问题的利器。CSS3中有一个非常非常强大的属性，就是border-image。

关于CSS3 border-image的基本属性，您可以参见这里 – CSS3 border-iamge使用参考指南，如果您想深入理解border-image的使用，原理以及实例，建议您狠狠地点击我的“http://www.zhangxinxu.com/wordpress/?p=822

（本篇完）