如何通过CSS仅显示元素相互重叠的相交区域？

核心可落地的方案基于CSS遮罩合成属性实现，兼容性覆盖所有现代浏览器，具体实现逻辑如下：

方案1：mask + mask-composite 交集遮罩（推荐，支持多层重叠） #

这是该类场景的最优方案，调试未生效通常是属性前缀缺失、合成模式值不匹配导致的：

• 实现逻辑：将所有需要参与重叠计算的元素放在同一个父容器内，给父容器设置多层遮罩，每层遮罩对应一个参与重叠的元素形状，通过遮罩合成规则让最终遮罩仅保留所有遮罩层的共同覆盖区域（即元素相交部分），父容器内非相交区域会被直接裁剪隐藏。
• 参考代码（对应四个顶角圆形取中心相交区域的场景）：

/* 四个圆形所在的共同父容器 */
.corner-circle-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  /* 四层遮罩分别对应四个角的圆形，尺寸、位置和实际伪元素圆保持一致即可 */
  -webkit-mask-image: 
    radial-gradient(circle at top left, #000 50px, transparent 50px),
    radial-gradient(circle at top right, #000 50px, transparent 50px),
    radial-gradient(circle at bottom left, #000 50px, transparent 50px),
    radial-gradient(circle at bottom right, #000 50px, transparent 50px);
  mask-image: 
    radial-gradient(circle at top left, #000 50px, transparent 50px),
    radial-gradient(circle at top right, #000 50px, transparent 50px),
    radial-gradient(circle at bottom left, #000 50px, transparent 50px),
    radial-gradient(circle at bottom right, #000 50px, transparent 50px);
  /* 遮罩合成规则：每层遮罩和已有结果取交集，webkit内核需使用对应前缀值 */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* 原有四个伪元素圆形不需要修改样式，正常放在父容器内即可 */

• 注意事项：
  • 遮罩层的形状、尺寸、位置必须和实际参与重叠的元素完全对齐，否则裁剪位置会出现偏差
  • 遮罩仅控制元素的显示区域，不会破坏原有圆形的半透明叠加效果，中心重叠区域的亮度表现和原始效果一致
  • Chrome、Edge等WebKit内核浏览器必须添加-webkit-前缀，否则属性不会生效

方案2：mix-blend-mode 混合模式（仅适用于两层元素相交场景） #

如果只需要处理两个元素的相交区域，可以用混合模式实现：将两个元素放在背景为纯黑的容器中，两个元素本身设置为纯白色，给元素设置mix-blend-mode: multiply，两层白色叠加的区域会保留白色，非重叠区域会和黑色背景混合为黑色，最后再给容器设置混合模式透掉黑色背景即可。但这个方案不支持两层以上的重叠计算，半透明效果适配成本高，不适配四圆重叠的场景。

非优先方案说明 #

clip-path 理论上也能实现裁剪效果，但多层图形的交集路径需要手动计算坐标，维护成本极高，无实用价值。

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