border-image-outset

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用 2017年2月.

border-image-outset CSS 属性设置元素的 边框图像 从其边框框偏移的距离。

使用 border-image-outset 在元素边框框外部呈现的边框图像部分不会触发溢出滚动条，也不会捕获鼠标事件。

试一试

语法

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

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

/* top and bottom | left and right */
border-image-outset: 1 1.2;

/* top | left and right | bottom */
border-image-outset: 30px 2 45px;

/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;

/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

border-image-outset 属性可以指定为一个、两个、三个或四个值。每个值都是一个 <length> 或 <number>。负值无效，会导致忽略 border-image-outset 声明。

  1. 如果指定了一个值，则它应用于所有四个边。
  2. 如果指定了两个值，则第一个值应用于顶部和底部，第二个值应用于左侧和右侧。
  3. 如果指定了三个值，则第一个值应用于顶部，第二个值应用于左侧和右侧，第三个值应用于底部。
  4. 如果指定了四个值，则它们按顺序（顺时针方向）应用于顶部、右侧、底部和左侧。

值

<length>

border-image 外边距的大小，表示为一个维度——带单位的数字。

<number>

border-image 外边距的大小，表示为元素相应 border-width 的倍数。例如，如果一个元素具有 border-width: 1em 2px 0 1.5rem，并且 border-image-outset: 2，则最终 border-image-outset 将计算为 2em 4px 0 3rem。

正式定义

初始值0
应用于所有元素，除了当 border-collapse 为 collapse 时的内部表格元素。它也适用于 ::first-letter。
继承否
计算值按指定方式，但将相对长度转换为绝对长度
动画类型按计算值类型

正式语法

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

示例

边框图像外边距

HTML

html
<div id="outset">This element has an outset border image!</div>

CSS

css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
  margin: 2.1rem;
}

结果

规范

规范
CSS 背景和边框模块级别 3


# 边框图像外边距

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅