文章来自www.css3s.cn
css3.0中增加的 border-image属性,看起来似乎很像background-image,实际上它们确实类似。通过它可以定义四条边的背景图片,图片是平铺还是拉伸,定义的时候和定义div的背景图片差不多。噢,还可以定义边框四个角上的背景图片。当前的浏览器就Safari 3支持,具体代码如下:
border-image
: /* 定义边框背景 */
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image
: /* 定义边角背景 */border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
-webkit-border-image: url(border.png) 27 27 27 27 round round;
由于需要图片,所以效果就免了。
说明:
url(border.png) :图片地址;
27 27 27 27:上 右 下 左 四条边框的宽度;
round round;round是表示重复平铺,若想把背景变成拉伸,可用stretch代替ground
文章来自www.css3s.cn