使用mask-image实现自适应背景粘性圆角遮罩的可行性咨询

这个方案完全可行，核心逻辑没问题——用黑白渐变配合mask-mode: luminance就能实现反向圆角遮罩，你没成功大概率是渐变参数、mask属性组合的细节没处理对。

关键踩坑点 #

• mask-mode必须设对：
  默认mask-mode是alpha，这个模式只识别透明度，黑白渐变在alpha模式下全是不透明，等于没遮罩。必须显式设置mask-mode: luminance，这个模式会把黑色区域转为完全透明（元素对应区域隐藏，露出后方背景），白色区域完全显示（保留元素内容），刚好符合反向圆角的需求。
• 渐变要写对方向和颜色顺序：
  要做角落的反向圆角，得用径向渐变，定位在目标角落，渐变半径等于圆角大小。比如右上角挖个20px的圆角，渐变应该这么写：

  mask-image: radial-gradient(circle at top right, black 20px, white 20px);
  

  黑色区域对应要挖掉的圆角（元素隐藏），白色区域是要保留的元素部分，颜色顺序不能搞反。
• 多圆角叠加要注意mask-composite：
  如果要给四个角落都做反向圆角，得叠加四个径向渐变，这时候要设置mask-composite来控制遮罩的叠加逻辑——我们需要的是多个遮罩的交集（每个圆角的隐藏区域叠加），所以Chrome用mask-composite: intersect，Firefox用mask-composite: and，兼容写法可以加前缀：

  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  

• 别和background-image的逻辑搞混：
  你觉得mask-image和background-image组合逻辑一致，这里有个关键区别：background是颜色混合（background-blend-mode），而mask是区域显示/隐藏的组合（mask-composite），叠加逻辑完全不同，这是很容易出错的地方。

存在的技术限制 #

• 浏览器兼容问题：mask-mode和mask-composite完全不支持IE，现代浏览器里mask-composite的语法还有差异，需要做兼容处理。
• 复杂动态背景的适配：如果后方是滚动渐变、视频这类动态背景，mask-image本身是静态渐变，但因为mask是元素的CSS属性，会跟随元素移动，所以能自动适配后方背景——这比SVG遮罩灵活，SVG如果是外部的还得重新定位，mask-image天然跟着元素走。

可运行示例代码 #

.sticky-round-corner {
  width: 300px;
  height: 200px;
  background: #2c3e50;
  /* 四个20px的反向圆角 */
  mask-image: 
    radial-gradient(circle at top right, black 20px, white 20px),
    radial-gradient(circle at top left, black 20px, white 20px),
    radial-gradient(circle at bottom right, black 20px, white 20px),
    radial-gradient(circle at bottom left, black 20px, white 20px);
  mask-mode: luminance;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

内容的提问来源于stack exchange，提问作者Jeroen