css3系列之详解border-image

border-image

border-image呢，是给边框加上背景图片的。没错，就是平常那一小小条的边框，也能加图片。

参数：

　　border-image-source

　　border-image-slice

　　border-image-width

　　border-image-outset

　　border-image-repeat

　　border-image-source: url()

设置边框图片的路径

　　border-image-slice: 100 100 100 100 fill

用以指定从哪 4 个位置分割图像（遵循上右下左的顺序）。

参数可以填 5个，前1~4 个参数是按照线的位置分割，按照上右下左的顺序进行分割，值的设置跟其他值的缩写方式一样，提供 2个值就是上下和左右，提供1个值就设置4条线的位置。注意只能填数字，百分比，不能加上px。 100 就等于 100px

那么到底是怎么分割法的呢，看下面的图片详解，看起来可能有点乱，认真看，还是看得懂的呢。蓝色数字 9 ，是内容区。如果不填上第五个参数 fill，是会空白的。

　　border-image-width: 1

设置边框图片的宽度。可以设置数字，和 px，数字的话是几倍的意思。 1的话，就是 1 * border-width, 也可以设置auto。 auto的计算方式是，取 border-image-slice 的值，然后加上 px 如果border-image-slice 的值为 100，那么取过来，加上 px 就是 100px。

　　border-image-outset: 100px 100px 100px 100px

在原来的基础上，上右下左扩大100px , 可以简写。也可以设置数字，数字也一样。是几倍的意思。 1 代表 1倍也就是 1* border-width(100) = 100px

　　border-image-repeat:

参数：stretch　　repeat　　round　　space

按照什么方式来平铺。可以填两个参数，一个参数，代表四个方向的平铺一样。两个参数，第一个值代表水平方向，第二个值代表垂直方向。

网上截图，截的不好，所以有中间那个小红点，忽略它就好。这个方法，兼容情况不是很好，一般没有特殊情况，不会去设置它的。

　　最后，简写方式：

只能填，三个参数。 slice 和repeat 是可以填多个值的。

border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space;

                /* 简写： 三个参数  source  slice  repeat */

巴特西

css3系列之详解border-image

最新文章

热门文章