border-image-outset

概述

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 typediscrete
正规顺序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) 未实现 ? ?