border-image
- 版本：CSS3
- 2018.3.7
语法：
border-image：border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat
默认值：看每个独立属性
适用于：看每个独立属性
继承性：无
动画性：看每个独立属性
计算值：看每个独立属性
媒 体：视觉
取值：
- border-image-source：
- 定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
- border-image-slice：
- 定义元素边框背景图像从什么位置开始分割。
- border-image-width：
- 定义元素边框背景图像厚度。
- border-image-outset：
- 定义元素边框背景图像的外延尺寸。
- border-image-repeat：
- 定义元素边框背景图像的平铺方式。
说明：
简写属性。定义将图像应用到元素的边框上
-
使用图像替代border-style去定义边框样式。当
border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。示例：
.test { border: 10px solid gray; border-image: url(test.png) 10/10px; } 如果例子中的图片不可见，或者未被加载，则会以
border的定义呈现，如果图片载入成功，则以border-image的定义呈现。 border-image属性生效的前提是定义了border-width和border-style。- 对应的脚本特性为：borderImage。
兼容性：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 10.0 | 40.0-49 #2 | 40.0-50.0 #1 #2 | 8.0-9.0 #1 #2 #3 | 40.0+ #2 | 8.0-9.2 #1 #2 #3 | 4.4-62.0 #1 #2 | 40.0-50.0 #1 #2 |
| 11.0 | 50.0+ | 51.0-64.0 #2 | 9.1-11.1 #1 | 9.3-11.3 #1 | 51.0-64.0 #2 | |||
| 12.0-13.0 #1 | ||||||||
| 14.0+ |
- 当
border-style属性值为none时，border-image仍然会奏效，See； - 不支持border-image-repeat属性的
space取值； - 不支持border-image-repeat属性的
round取值；
