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

浏览器兼容性

BCD tables only load in the browser