概述
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- 四个方向的值都继承于父元素的该属性计算后值。
规范
浏览器兼容性
| 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) |
未实现 |
? |
? |