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 的哪个部分将被拉伸以显示设计的边框。这样,你可以创建具有更大程度的灵活性和创造性的设计边框。