注意:
1.border-image中的fill用于指定九宫格中中间部分是否显示,默认是没有fill,不显示。如果在四个切割数字clip之后添加fill,则显示九宫格中间部分,中间部分的显示效果是横向和竖向效果的叠加。
eg:border-image:url(1.jpg) 27 32 27 32 fill round;(四个切割数字不能加单位)
2.四个切割数字:如果没有第四个,这第四个和第二个相同;如果只有两个,则第三个和第一个相同,第四个和第二个相同。如果只有一个,这四个相同。
对于repeat效果,则默认为stretch,如果只写一个,则第二个和第一个相同。
3.当border-width一定时,border-image的九宫格图片会随着border-width的变化而变化,并完全显示在边框内。例如当border-width大于九宫格的四个角的图片大小,则四个角的图片会放大,并100%显示在边框中。如果border-width小于九宫格图片大小,则图片会缩小至border-width的大小。
4.border-image-outset:用于border-image向外延伸。
5.border-image-width:用于控制border-image的大小。border-image-width用于控制图片边框的宽度,但不能改变整体盒子的大小(border+height/width).在没有定义border-image-width的大小时,border-width就用于控制border-image的大小。
border-width一定时,元素的height/width+border-width就确定了。盒子的整个轮廓就不变了,无论border-image-width怎样改变大小,只能改变border-image的大小。