用一张图片实现水平和垂直方向点状线背景

众所周知,IE6是不支持dotted边框的,显示的效果和dashed一样。如果为了美观,就需要用到背景图片了。

之前做这些竖直和水平的点状线,经常是分别做一张点状线的背景图片来对应实现。
最近做页面的时候忽然想出下边的图片来:

点状线用的背景

点状线用的背景

制作一个宽高都为2px的图片,在图的左上角用画一个1px的虚线点,其余部分留白。

使用的时候根据需要设置好区块的background-position并对应设置背景平铺为repeat-x或repeat-y即可。

这里用的点状线效果是间隔1px的,如果需要其他间隔效果的线,则可以根据需求对图片进行调整,并调整background-position和background-repeat。如需要透明效果,则让图片背景透明即可。发挥想象力,可以获得更多美妙的灵感。

本文为转载,原文作者:千江月,原文链接:http://www.landfancy.com/archives/dotted-background/

相关日志

留下足迹