border-image-slice CSS属性将border-image-source指定的图像划分为9个区域:四个角、四个边和一个中间。它通过指定4个向内偏移量来实现这一点,这些偏移量通常创建一个3×3的网格。
边界图像的中间部分将被丢弃,并且不被边界本身使用,但是background-image如果出现了fill关键字,则将其用作背景图像。
下表为此属性的用法说明和版本历史记录,以及该属性在javascript脚本中的使用语法。
默认值: | 100% |
---|---|
适用于: | 该属性能被应用于任何元素,但当表格元素(如 tr,th,td )的border-collapse属性值为collapse时border-image-slice属性无效。它也适用于::first-letter。 |
继承: | 没有 |
可动画制作: | 否。请参见 动画属性。 |
版本: | CSS3的新功能 |
JavaScript语法: | object.style.borderImageSlice="60% 60%" |
该属性的语法如下:
border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit
下面的示例演示了如何使用border-image-slice属性。
.box { width: 300px; height: 150px; border: 15px solid transparent; border-image-source: url("border.png"); border-image-slice: 30; border-image-repeat: round; }测试看看‹/›
下表描述了此属性的值。
值 | 描述 |
---|---|
number | 对于光栅图像,表示图像的距离(以像素为单位),对于矢量图像,表示矢量坐标。 |
percentage | 相对于图像的大小:水平偏移的图像宽度,垂直偏移的图像高度。 |
fill | 如果存在,则保留图像的中间部分。否则,将中间视为透明。 |
initial | 将此属性设置为其默认值。 |
inherit | 如果指定,则关联元素采用其父元素border-image-slice属性的计算值。 |
border-image-slice属性浏览器的兼容性,下表中的数字表示支持该属性的浏览器最低版本号;所有主流浏览器均支持该属性。
|
请参考以下教程:CSS3 Border和CSS Border。
相关属性:border-image,border-image-source,border-image-repeat,border-image-width,border-image-outset,border。