border-image-outset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

概述

border-image-outset 属性定义边框图像可超出边框盒的大小。

语法

css
/* <length> 值 */
border-image-outset: 1rem;

/* <number> 值 */
border-image-outset: 1.5;

/* 上、下 | 左、右 */
border-image-outset: 1 1.2;

/* 上 | 左、右 | 下 */
border-image-outset: 30px 2 45px;

/* 上 | 右 | 下 | 左 */
border-image-outset: 7px 12px 14px 5px;

/* 全局值值 */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

sides

边框图像在四个方向超出边框盒的<length><number>数量。

horizontal

边框图像在水平方向(左和右)超出边框盒的<length><number>数量。

vertical

边框图像在垂直方向(上和下)超出边框盒的<length><number>数量。

top

边框图像在上方超出边框盒的<length><number>数量。

bottom

边框图像在下方超出边框盒的<length><number>数量。

边框图像在右方超出边框盒的<length><number>数量。

left

边框图像在左方超出边框盒的<length><number>数量。

inherit

四个方向的值都继承于父元素的该属性计算后值。

形式定义

初始值0
适用元素all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
是否是继承属性
计算值as specified, but with relative lengths converted into absolute lengths
动画类型按计算值的类型

形式语法

border-image-outset = 
[ <length [0,∞]> | <number [0,∞]> ]{1,4}

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-outset

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-outset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support