mask-border-outset
语法
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倍数的遮罩边框偏移量。
正式定义
正式语法
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 蒙版模块 Level 1 # the-mask-border-outset |
浏览器兼容性
加载中…