摘要
border-image-width 定义图像边框宽度。假如border-image-width大于已指定的border-width，那么它将向内部(padding/content)扩展.
| 初始值 | 1 |
|---|---|
| 适用元素 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| Percentages | refer to the width or height of the border image area |
| 适用媒体 | visual |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
Formal syntax: [ <length-percentage> | <number> | auto ]{1,4}where
<length-percentage> = <length> | <percentage>
border-image-width: all /* One-value syntax */ E.g. border-image-width: 3; border-image-width: vertical horizontal /* Two-value syntax */ E.g. border-image-width: 2em 3em; border-image-width: top horizontal bottom /* Three-value syntax */ E.g. border-image-width: 5% 15% 10%; border-image-width: top right bottom left /* Four-value syntax */ E.g. border-image-width: 5% 2em 10% auto; border-image-width: inherit
where:
- width
- 当使用一个值的时候， 这个值表示图像的宽度被当做边框宽度应用到四条边框.
- vertical
-
当使用两个值的时候（指定上下边框），这个值表示图像的宽度被当做边框宽度应用到垂直边框.
- horizontal
-
当使用两个值的时候（指定左右边框），这个值表示图像的宽度被当做边框宽度应用到水平边框.
- top
-
当使用3个和4个值的时候，这个值表示图像的宽度被当做边框宽度应用到顶部边框.
- bottom
-
当使用3个和4个值时候，这个值表示图像的宽度被当做边框宽度应用到底部边框.
- right
-
当使用4个值的时候，这个值表示图像的宽度被当做边框宽度应用到右侧边框
- left
-
当使用4个值的时候，这个值表示图像的宽度被当做边框宽度应用到左侧边框.
inherit- Is a keyword indicating that all four values are inherited from their parent's element calculated value.
取值
<length>- 表示边框宽度. 可以是绝对长度或相对长度. 不能使用负值。
<percentage>- 按照元素的百分比（%）表示边框宽度. 不能使用负值.
<number>- 根据元素
border-width属性，用倍数表示边框宽度. 不能使用负值 auto- Indicates that the width, or height, of the border must be the intrinsic size of that dimension.
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-image-width |
Candidate Recommendation | Initial specification |
浏览器支持
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 15.0 | 13.0 (13.0) | 11 | 15 | 6 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 13.0 (13.0) | 未实现 | ? | ? |