mask-border-width

**mask-border-width** CSS 属性设置元素的 蒙版边框 的宽度。

语法

css
/* Keyword value */
mask-border-width: auto;

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

/* <percentage> value */
mask-border-width: 25%;

/* <number> value */
mask-border-width: 3;

/* top and bottom | left and right */
mask-border-width: 2em 3em;

/* top | left and right | bottom */
mask-border-width: 5% 15% 10%;

/* top | right | bottom | left */
mask-border-width: 5% 2em 10% auto;

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

mask-border-width 属性可以使用一个、两个、三个或四个从以下值列表中选择的值来指定。

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

值

<length-percentage>

蒙版边框的宽度，指定为 <length> 或 <percentage>。百分比相对于水平偏移的边框区域的宽度和垂直偏移的边框区域的高度。不得为负数。

<number>

蒙版边框的宽度，指定为相应 border-width 的倍数。不得为负数。

auto

蒙版边框的宽度设置为相应 mask-border-slice 的内在宽度或高度（以适用者为准）。如果图像没有所需的内在尺寸，则改为使用相应的 border-width。

正式定义

初始值auto
应用于所有元素；在 SVG 中，它应用于容器元素，但不包括 <defs> 元素和所有图形元素
继承否
百分比相对于蒙版边框图像区域的宽度/高度
计算值按指定值，但将相对长度转换为绝对长度
动画类型离散

正式语法

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

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本用法

此属性似乎尚未在任何地方得到支持。当它最终开始得到支持时，它将用于定义边框蒙版的宽度——将其设置为与 mask-border-slice 不同的值会导致切片缩放以适应边框蒙版。

css
mask-border-width: 30 fill;

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

css
-webkit-mask-box-image-width: 20px;

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

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅