CSS | border-image-slice 属性介绍

介绍

border-image-slice 属性定义用于边框背景的可缩放图片的切割方式。它指定了可缩放图像的哪部分用于创建边框的四个角，边框的四条边以及边框区域的其余部分。

该属性需要与 border-image-source、border-image-repeat 和 border-image-width 属性配合使用。

语法

border-image-slice: number|%|fill|inherit;

/* 例子 */
border-image-slice: 1 1 1 1;
border-image-slice: 10% 20% 30% 40%;
border-image-slice: fill;
border-image-slice: inherit;

值

• number：将图片按像素值切片。
• %：将图片按百分比值切片。
• fill：所有的图片将会被拉伸填充整个边框区域，同时保留图片原本的纵横比。
• inherit：继承父元素的属性值。

语法中的 number 必须是 1 或 4 个值，其中第一个数字表示为 top 位置，顺时针方向，后面的表示为 right、bottom 和 left 位置。

实例

border-image-source: url(border.png);
border-image-slice: 30;
border-image-width: 20px;
border-image-repeat: round;
border-image-outset: 10px;

解释

在上面的例子中，我们使用了 border-image-slice 属性来指定如何切割 border.png 图像，它将会按照 30 像素切片。这将使得图片被切成几个小的相等部分，每部分为 30 像素。这些切片将会被用于构建四个角，四条边以及填充边框区域的其余部分。

浏览器兼容性

border-image-slice 属性在所有现代浏览器中都得到了良好的支持，IE10+ 也是支持的。但如果您的网站为 IE9 及以下版本或 Android 2.3 及以下版本的浏览器提供支持，请谨慎使用该属性。