CSS mask-composite 怎么叠加两层遮罩做镂空边框

如果一个卡片需要渐变边框，中间却保持透明或显示页面底色，单独使用 border 往往会把“边框颜色”和“内部镂空”混在一起。更稳定的做法是准备两层 mask：一层覆盖整个外框，另一层覆盖内容区，再用 mask-composite: exclude 把重叠部分排除掉。

做两层遮罩镂空边框时，先让第一层描述完整外框，再让第二层覆盖内容区，最后用 mask-composite: exclude 保留两层之间的环形区域。只要两层的尺寸、位置和圆角一致，渐变背景就会只出现在边框带上。

先把两层 mask 的职责拆开

问题现场通常是这样的：渐变背景已经写好了，但卡片内部也被渐变填满；或者加了一个白色伪元素后，页面底色被遮住，所谓“镂空”变成了普通实心边框。先不要急着改颜色，应该把视觉目标拆成三个盒子：元素本身、覆盖整个元素的外层 mask，以及只覆盖内容区的内层 mask。

部署状态
  
这块内容应该透出页面底色。

.hollow-card {
  /* 用透明边框给盒子预留边缘宽度，真正的颜色来自 background。 */
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #37d5ff, #7a5cff 55%, #ff7ac8) border-box;

  /* 第一层覆盖外框，第二层覆盖内容区；两层先保持同一位置。 */
  mask:
    linear-gradient(#000 0 0) border-box,
    linear-gradient(#000 0 0) padding-box;
  mask-composite: exclude;
}

这里的两个 linear-gradient(#000 0 0) 不是装饰背景，而是全不透明的几何遮罩。第一层按 border-box 覆盖整个圆角盒子，第二层按 padding-box 覆盖内部区域；exclude 让重叠的中心区域不再参与最终遮罩，于是留下外沿的环形区域。颜色仍由 background 提供，遮罩只负责决定颜色在哪些像素可见。

用 exclude 把重叠的内容区挖掉

如果前面的样式仍然显示成整块渐变，优先检查组合运算，而不是继续调整渐变颜色。MDN 对 mask-composite 的定义是：当前遮罩层会与下面已经组合的遮罩层进行合成；exclude 保留两层不重叠的区域。对于外框和内容区这组几何关系，不重叠的部分正好就是边框带。

.hollow-card {
  /* 让遮罩不重复铺满，避免重复图像形成额外的亮边。 */
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  mask-composite: exclude;
}

.hollow-card > * {
  /* 内容层保持正常布局，不用额外伪元素盖住镂空中心。 */
  position: relative;
  z-index: 1;
}

这一步的判断重点有两个。第一，两个 mask-image 必须覆盖同一个元素坐标系，否则“内层”并不会准确落在外层里面。第二，mask-composite 是按逗号列表与 mask 层匹配的；只有两层时，一个 exclude 就表达当前这个组合关系，多余的值没有必要先写进去。

圆角、背景和 mask 必须使用同一套盒模型

镂空边框最容易出现的第二类问题是四个角不一致：背景渐变的圆角已经变圆，mask 却仍按另一个矩形范围处理，结果表现为角落漏色、边框厚薄不均，或者内容区被削掉一圈。把圆角、背景定位和 mask 的盒模型放在同一个规则里，排查会简单很多。

.hollow-card {
  /* 背景和遮罩都使用同一盒子，圆角才会落在相同轮廓上。 */
  border-radius: 18px;
  background-clip: border-box;

  /* 兼容目标浏览器时，按项目矩阵补充前缀组合规则。 */
  -webkit-mask:
    linear-gradient(#000 0 0) border-box,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
}

WebKit 前缀的合成关键字与标准属性的命名并不完全相同，项目如果仍要支持依赖前缀的浏览器，应把它当作单独的兼容分支维护。标准写法继续保留 mask-composite: exclude，不要为了迁就前缀而删掉标准属性。

边框变实心或内容消失时这样定位

把写法收敛成可维护的组件规则

这个技巧适合边框是视觉装饰、中心内容需要透出底色的卡片、标签和提示面板。它不适合拿来替代复杂的裁剪动画，也不应该把十几层 mask 和不同组合运算堆在一个通用类里。建议把边框宽度、圆角和渐变色抽成自定义属性，把两层遮罩固定成组件内部协议；状态变化只改背景或自定义属性，避免复制整套 mask 声明。

.hollow-card {
  /* 变量只承载可变视觉参数，遮罩结构保持稳定。 */
  --edge-size: 2px;
  --edge-radius: 18px;
  --edge-gradient: linear-gradient(135deg, #37d5ff, #7a5cff 55%, #ff7ac8);

  border: var(--edge-size) solid transparent;
  border-radius: var(--edge-radius);
  background: var(--edge-gradient) border-box;
  mask:
    linear-gradient(#000 0 0) border-box,
    linear-gradient(#000 0 0) padding-box;
  mask-composite: exclude;
}

如果需要确认规范语义，官方资料可直接查看 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-composite。最终是否采用还要看项目的最低浏览器版本；不能只因为开发环境能显示，就跳过降级边框的设计。

常见问题

exclude 和 subtract 应该怎么选？

exclude 关注两层不重叠的区域，适合把内层内容区从外层整体中挖掉；subtract 更适合表达从下面的合成结果中减去当前层。具体效果还取决于 mask 层顺序，不能只替换关键字而不看两层几何位置。

为什么透明中心没有透出页面背景？

遮罩只决定元素像素是否可见，不负责制造页面背景。检查卡片本身是否又设置了不透明伪元素、背景色或覆盖层；如果中心需要透出，就不要再用额外元素把它填回去。

必须同时写 mask 和 -webkit-mask 吗？

取决于项目的浏览器支持范围。标准属性应作为主实现；如果兼容目标仍需要 WebKit 变体，再维护对应的前缀组合规则，并准备普通 border 作为降级。