border-image属性是CSS3的border模块新增加的属性,从意思来看应该是指:边框图片。其实标签的非边框部分也会被图片覆盖,大致效果如下:
大致代码如下:
width:200px;
height:200px;
border:dotted 20px;
-webkit-border-image:url("image/f1.jpg") 20 20 repeat repeat;
border-image必须设置border-width就边框才有效。
定义:border-image:url top right bottom left x-repeat y-repeat
url 采用的图片的路径
top,right,bottom,left就是图片的切割方法,对应下面的九宫格,但是简单来说可以对应设定的border-width来确
定,这两个属性的值最好是对应 注意:这个参数默认是px为单位,但是不能再加单位px了!
表示图片的变换样式,包括三个值 stretch拉伸 repeat重复 round平铺