border-image-width

摘要

border-image-width 定义图像边框宽度。假如border-image-width大于已指定的border-width,那么它将向内部(padding/content)扩展.

初始值1
适用元素all elements, except table elements when border-collapse is collapse. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the width or height of the border image area
适用媒体visual
计算值as specified, but with relative lengths converted into absolute lengths
Animation typediscrete
正规顺序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

浏览器支持

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) 未实现 ? ?

文档标签和贡献者

 此页面的贡献者: dustpg, teoli, Sebastianz, xiaoho
 最后编辑者: dustpg,