CSS | border-image 属性

CSS 的 border-image 属性用于指定边框元素的图像，其中图像被作为边框体现。该属性可以用来创建与众不同的边框，增强页面的可视性，并且可以用于可以动态调整边框长度的元素。

语法

border-image: source slice width outset repeat|initial|inherit;

属性值解释：

• source: 指定边框图像的位置，可以是图片的相对路径，绝对路径，也可以使用 url() 函数。
• slice: 定义如何切片边框图片，可以是长度值或百分比。边框图片的四个角，四条边，和中心区域都可以定义自己的大小和位置。
• width: 定义边框的宽度。
• outset: 边框延伸到盒子外面的距离，可用于在盒子的一侧增加阴影效果。
• repeat: 该属性定义边框图片是否平铺（repeat）以及如何平铺。默认为 stretch。

实例

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

这个实例会将图片 border.png 应用于元素的边框，并根据指定的值将图像分割成九个部分。边角将使用圆形分片（round），内部区域将被拉伸以填充边框，而边缘上的部分将保留其原始大小。