css3中border-image的用法(fill 、border-image-outset 、border-image-width)

css3中border-image的用法

注意:

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的大小。