定义和用法
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%;
}
CSS 语法
border-image-slice: number|%|fill|initial|inherit;
属性值
值 | 描述 |
number |
无单位数字(如 30)在栅格图(如 PNG/JPG)里代表像素距离,在矢量图(如 SVG)里代表坐标值。 |
% |
相对于图像尺寸的百分比值:图像的宽度影响水平偏移,高度影响垂直偏移。 |
fill |
保留边框图像的中间部分。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持border-image-slice
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
相关页面
CSS 教程:CSS 边框图像
CSS 参考手册:CSS border-image 属性
CSS 参考手册:CSS border-image-source 属性
CSS 参考手册:CSS border-image-width 属性
CSS 参考手册:CSS border-image-repeat 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
17
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈