Menu
我公司是结合网络技术为家电维修行业服务最早,维修技术最专业的家电维修公司。公司总部设立在北京,各个省份均有我们的维修网点,从事20多年家电行业,值得您的信赖!

当前位置减速带 > 减速带 >

完毕兼容性的CSS粗虚线边框(dashed)结果

日期:2019-10-23 08:15 来源: 减速带

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

完毕兼容性的CSS粗虚线边框(dashed)结果

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

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

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

  首先,我们是以让各个浏览器下的边框变现都与IE近乎一致为前提的。IE浏览器下的虚框紧密踏实,作为剪裁线可谓上佳选择,所以,以下所述内容均是以实现IE浏览器下(4像素-2像素-4像素-2像素)的虚线框效果为目标的。

  目前而言,从Firefox3.6,Chrome2,Safari4,到Opera10都支持强大的border-image属性,所以,我们完全 可以使用border-image属性实现类似于IE浏览器下的虚线框效果。说起border-image,就是使用图片实现边框效果。换句话说,在本实 例中,在Firefox3.6,Chrome2,Safari4,Opera10浏览器下,我们要使用图片模拟IE下的虚线边框效果。下面,就开始简单介 绍如何实现的。

  其实CSS相关的代码很简单,关键是图片的制作,要想做出可以模拟出虚框效果的背景图片,不对border-image属性有着深入的了解,那是根本不可能的。所以,如果您是好学之人,非常建议您看看我写的这篇CSS3 border-image详解、应用及jQuery插件。

  border-image所链接的image图片大小很小,尺寸为18像素*18像素,为了便于您看清,我特意截了一张在photoshop cs4中放大的图片,如下:

完毕兼容性的CSS粗虚线边框(dashed)结果

  其中,我已经用参考线划出了九宫格模型,我刚又看了下,其实上图并不是最佳的边框图。上图看似没有什么规律,其实很简单,九宫格的四个边角是固定 的,不参与平铺拉伸等,四角以外的部分,就是repeat部分了。这里就不具体展开了,还是那句话,上面提到的文章中我已经做了非常详细的讲解(还有交互 的Flash动画演示)。

完毕兼容性的CSS粗虚线边框(dashed)结果

  我上面提到过,原border-image的链接图片可以有改进的地方,改进之处在于转角的处理,IE浏览器下的border转角是等宽分配的,所以,我们可以对这张图片做进一步的完善,完善后的结果如下图,放大16倍后的显示:

完毕兼容性的CSS粗虚线边框(dashed)结果

完毕兼容性的CSS粗虚线边框(dashed)结果

  这里图片的大小为18像素*18像素是必然的,因为一个平铺的最小单元式4像素+2像素=6像素,配合border-image的九宫格模型,最小宽高就是6像素*3=18像素。

  由于平铺的最小单位是6像素,所以,如果元素的宽度或是高度不是6的倍数,是不会有完美的无缝平铺的。最后一点,要设置边框的宽度为最小平铺单元(例如这里的6像素)大小,否则border-image图片会被拉伸或是压缩。

减速带

上一篇:

下一篇: