← 返回首页
mask-border-width - CSS:层叠样式表 | MDN

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

mask-border-width

有限可用

此特性不属于基线,因为它尚未在主流浏览器中得到支持。

Want more support for this feature? Tell us why.

mask-border-width CSS 属性设置元素的 mask border的宽度

本文内容

语法

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; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | 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: unset;

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

  • 指定一个值时,即对应四条边的宽度;
  • 指定两个值时,第一个值对应上下边框的宽度,第二个值对应左右边框的宽度;
  • 指定三个值时,第一个值对应上边框的宽度,第二个值对应左右边框的宽度,第三个值对应底部边框的宽度;
  • 指定四个值时,按顺时针方向,分别对应上,右,下,左边框的宽度。

<length-percentage>

mask边框宽度指定一个值或者百分比,设定百分比时,是相对于mask的长度和宽度。不能为负数。

<number>

mask 边框宽度为元素border-width的倍数。不能为负数。

auto

使mask-border的宽度等于相应mask-border-slice的固有宽度或高度(以适用者为准),如果图像没有所需的固有尺寸,则使用相应的边框宽度。

Formal syntax

mask-border-width =
<'border-image-width'>

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

<length-percentage> =
<length> |
<percentage>
此语法反映了基于 CSS Borders and Box Decorations Module Level 4, CSS Masking Module Level 1, CSS Values and Units Module Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息,请参阅浏览器兼容性

规范

规范
CSS Masking Module Level 1
# the-mask-border-width
初始值适用元素是否是继承属性Percentages计算值动画类型
auto
all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
relative to width/height of the mask border image area
as specified, but with relative lengths converted into absolute lengths
离散值

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。