CSS3中 border-image 的基本用法

Posted 2023-01-30 十木禾

border-image 是CSS3中的属性，用于使用图片左右一块区域的边界，其基本的使用形式如下

border-image: url(img-url) top right bottom left;

其中 top right bottom left分别表示上右下左的边距，如下示例

border-image: url(border.png) 30 30 30 30; 

其对应的切割效果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t4TKYHU5-1612148475083)(//img-blog.csdn.net/20180319095645328?watermark/2/text/Ly9ibG9nLmNzZG4ubmV0L3pqcV8xMzE0NTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)]

我们将图片的各个区域进行编号，如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A14kJyd4-1612148475088)(//img-blog.csdn.net/20180319095944364?watermark/2/text/Ly9ibG9nLmNzZG4ubmV0L3pqcV8xMzE0NTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)]

在切割完成之后，其中A1，A2，A3，A4四个区域是保持不变的，C区域直接去除掉
我们是通过对于B1，B2，B3，B4这四个区域进行repeat，strentch，round的。