mask-border-outset

**mask-border-outset** CSS 属性指定元素的 蒙版边框 从其边框框延伸的距离。

语法

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

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

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

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

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

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

mask-border-outset 属性可以指定为一个、两个、三个或四个值。每个值都是一个 <length> 或 <number>。负值无效。

  • 当指定**一个**值时，它将相同的延伸应用于**所有四个边**。
  • 当指定**两个**值时，第一个延伸应用于**顶部和底部**，第二个应用于**左侧和右侧**。
  • 当指定**三个**值时，第一个延伸应用于**顶部**，第二个应用于**左侧和右侧**，第三个应用于**底部**。
  • 当指定**四个**值时，延伸分别应用于**顶部**、**右侧**、**底部**和**左侧**，顺序为顺时针方向。

值

<length>

蒙版边框延伸的大小，以尺寸表示。

<number>

蒙版边框延伸的大小，以相应 border-width 的倍数表示。

正式定义

初始值0
应用于所有元素；在 SVG 中，它应用于容器元素，但不包括 <defs> 元素和所有图形元素
继承否
计算值按指定方式，但将相对长度转换为绝对长度
动画类型离散

正式语法

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

示例

基本用法

此属性似乎尚未在任何地方得到支持。当它最终开始得到支持时，它将用于将蒙版从元素边框框的内边缘移开——您可以使用它使蒙版从边框的一部分开始，而不是从其内部开始。

css
mask-border-outset: 1rem;

基于 Chromium 的浏览器支持此属性的过时版本——mask-box-image-outset——并带有前缀

css
-webkit-mask-box-image-outset: 1rem;

注意：mask-border 页面提供了一个工作示例（使用 Chromium 中支持的过时的带前缀的边框蒙版属性），因此您可以了解其效果。

规范

规范
CSS 蒙版模块级别 1
# the-mask-border-outset

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅