css 中border-image 九宫格怎么理解,,求形象解答,小白不懂

发布网友发布时间：2022-04-06 11:55

共1个回答

热心网友时间：2022-04-06 13:24

把一张用来做边框的图片横砍两刀，竖砍两刀，就变成一个由九个小图片组成的九宫格，其中四个角的四张图片就是边框的四个角，四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容，不属于边框，所以这张图片是用不到的，因此这个九宫格实际被利用到的就是四周的八张图片。

追问border-image:url（“”1.png“”）50 50 50 60 后面四个参数什么来的？

追答上面图中的第一条横线距离上边50像素；
右边那条竖线距离右边50像素；
下边的横线距离底边50像素；
左边的竖线距离左边60像素。
这就是 50 50 50 60 的来历。