CSS边框图片补充--跟着李南江学编程

一、fill

上一篇提到，slice会从四个方向根据给定的值往里推，然后截取图片，那么首先将九宫格中1、3、7、9（四个角）放到border的顶点中，再将2、4、6、8（四个角的夹角）放到border中，那么最后只剩一个5没被放到border中，

image.png
image.png

那么当我们想让5出现时，border-image-slice: 70 70 70 70 fill; 在slice属性的最后添加fill，中间的图片也能出现

image.png

二、border-image-outset:10px 20px 30px 40px; 上 右 下 左

让border的背景图片超出border边框展示

image.png

三、连写方式

border-image: url(img/border.jpg) 70 fill stretch; 图片地址 slice值 fill 重复方式

image.png