语法:
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 '> 的定义呈现。
- 对应的脚本特性为borderImage。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-10.0 | 2.0-3.0 | 4.0-14.0 -webkit- | 3.1-5.1 -webkit- | 15.0+ | 3.2-5.1 -webkit- | 2.1-4.3 -webkit- | 18.0+ |
11.0+ | 3.5-14.0 -moz- | 15.0 -webkit- | 6.0+ | 6.1+ | 4.4-4.4.4 | |||
15.0+ | 16.0+ |