一、border-image的兼容性
二、border-image的参数(包括图片、裁剪位置、重复性)
1、图片(border-image-source)采用url()调用,可以是相对/绝对路径
2、图片的裁剪位置(border-image-slice)
1>参数没有单位,专指像素。border-image:url(a.png)27 repeat; 这里27指27px
2>支持百分比,百分比大小相对于边框图片而言
3>裁剪特性,效果的实现上类似于九宫格裁剪,有1~4个参数,方位符合CSS普遍的方位规则(上右下左,顺时针)
border-image:url(border.png)30 % 35% 40% 30% repeat;
在图片上部30%的地方裁剪一下,在右部35%的地方裁剪一下,在底部40%的地方裁剪一下,在左部30%的地方裁剪一下。形成了九个分离区域——九宫格
3、重复性(border-image-repeat)参数0~2个,2个参数一个水平,一个垂直
这里重复与background的背景重复,差异较大。background图片的重复包括:重复、不重复、水平重复、垂直重复。对于border-image而言包括:repeat(重复)、round(平铺)、stretch(拉伸),其中stretch是默认值。
三、应用
四、参考内容
1、http://www.zhangxinxu.com/wordpress/?p=518
2、http://www.w3school.com.cn/cssref/pr_border-image.asp