mask-border-width
语法
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代替。
正式定义
正式语法
mask-border-width =
[ <length-percentage> | <number> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
示例
基本用法
mask-border-width 定义了边框遮罩的宽度——将其设置为与 mask-border-slice 不同的值将导致切片缩放以适应边框遮罩。
css
/* Final mask scaled down to 20px wide */
mask-border-slice: 30 fill;
mask-border-width: 20px;
基于 Chromium 的浏览器支持此属性的旧版本 — mask-box-image-width — 带有前缀。
css
-webkit-mask-box-image-width: 20px;
注意：mask-border 页面提供了一个工作示例（使用 Chromium 支持的过时带前缀的边框遮罩属性），因此您可以了解其效果。
规范
| 规范 |
|---|
| CSS 蒙版模块 Level 1 # the-mask-border-width |
浏览器兼容性
加载中…