CSS3 border-image-slice 属性

CSS3 border-image-slice 属性

CSS3 border-image-slice 属性用于设置 border-image 的裁切区域。

border-image-slice 属性定义了一个如下的四个属性值：

• (top) 皮带上边缘到基线的距离。
• (right) 皮带右边缘到基线的距离。
• (bottom) 皮带下边缘到基线的距离。
• (left) 皮带左边缘到基线的距离。

语法：

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

属性值：

• number：用拉伸度量标尺裁剪、数值为百分比的百分比值表示皮带长度。
• %：根据 box 的大小而定，例如：50%，那么皮带会在在 box 各方向上都距离 50% 处被裁剪。
• fill：如果含有填充，则铺满到边框框架的边缘。如果没有填充，则裁剪将被设置为零。这是默认值。
• initial：设置该属性为默认值。
• inherit：从父元素继承该属性。

实例：

div {
  border-image-slice: 30% 35% 25% 40%;
}

上例中，border-image-slice 属性将会把裁切区域设置为：

• 30% 的皮带在上边缘处。
• 35% 的皮带在右侧边缘处。
• 25% 的皮带在下边缘处。
• 40% 的皮带在左侧边缘处。

当你将 border-image-slice 的值设置为 auto 时，它将按照如下方式计算：

• 如果一个 border-image-slice 未指定它的值，则默认值是0。
• 如果指定了1-3个值，则值2和值4将与值1和值3相同。
• 如果指定了4个值，则它们将按顺序解释为 top、right、bottom 和 left 的值。

总之，border-image-slice 属性允许你定义一个 image 的哪个部分将被拉伸以显示设计的边框。这样，你可以创建具有更大程度的灵活性和创造性的设计边框。