CSS border-image-slice 属性

主题

定义和用法

border-image-slice属性规定图像边框的向内偏移。

border-image-slice属性与border-image-source、border-image-width和border-image-outset等属性配合使用。

border-image-slice将源图像划分为9个区域：4个角（对应元素的四个角）、4个边（对应元素的四条边）、1个中间区域（默认丢弃，除非指定了fill关键字）。

默认值：	100%
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderImageSlice="30%"Demo ❯

下面通过演示实例，让你更直观地了解border-image-slice属性的用法。

实例代码运行代码

复制

.example {
    border-image-source: url(border.png);
    border-image-slice: repeat;
    border-image-slice: 30%;
}

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

值	描述
`number`	无单位数字（如 30）在栅格图（如 PNG/JPG）里代表像素距离，在矢量图（如 SVG）里代表坐标值。
`%`	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
`fill`	保留边框图像的中间部分。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。