概述
border-image-outset属性定义边框图像可超出边框盒的大小。
| 初始值 | 0 |
|---|---|
| 适用元素 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 是否是继承属性 | 否 |
| 适用媒体 | 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> | <number> ]{1,4}
/* border-image-outset: sides */ border-image-outset: 30%; /* border-image-outset:垂直 水平 */ border-image-outset: 10% 30%; /* border-image-outset: 顶 水平 底 */ border-image-outset: 30px 30% 45px; /* border-image-outset:顶 右 底 左 */ border-image-outset: 7px 12px 14px 5px; border-image-repeat: inherit;
值
- sides
- 边框图像在四个方向超出边框盒的
<length>或<number>数量。 - horizontal
- 边框图像在水平方向（左和右）超出边框盒的
<length>或<number>数量. - vertical
- 边框图像在垂直方向（上和下）超出边框盒的
<length>或<number>数量. - top
- 边框图像在上方超出边框盒的
<length>或<number>数量. - bottom
- 边框图像在下方超出边框盒的
<length>或<number>数量. - right
- 边框图像在右方超出边框盒的
<length>或<number>数量. - left
- 边框图像在左方超出边框盒的
<length>或<number>数量. inherit- 四个方向的值都继承于父元素的该属性计算后值。
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-image-outset |
Candidate Recommendation | 首次定义 |
浏览器兼容性
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 | 15.0 (15.0) | 11 | 15 | 6 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 15.0 (15.0) | 未实现 | ? | ? |