如何使用CSS mask-composite属性组合多个遮罩层实现复杂图形？-css教程-PHP中文网

mask-composite管用但跨浏览器不兼容：safari完整支持，chrome/firefox未稳定实现或需手动启用且不可靠；生产环境应降级使用单个svg 手动拼合图形或js动态生成，避免依赖css多层合成。

如何使用css mask-composite属性组合多个遮罩层实现复杂图形？

mask-composite 是什么，它到底管不管用？

它管用，但只在部分浏览器生效——mask-composite 是 CSS Masking Level 1 规范中定义的属性，用于控制多个 mask-image 遮罩层之间的合成方式（类似 Photoshop 的图层混合模式）。但它目前仅被 Safari（含 iOS）完整支持；Chrome 和 Firefox 仍处于实验或未实现状态（Chrome 120+ 启用 chrome://flags/#enable-experimental-web-platform-features 可临时启用，但不稳定；Firefox 完全忽略该属性）。别把它当跨浏览器方案用。

实际能用的写法：Safari 下叠加两个 SVG mask 的合成

想让两个遮罩叠加出“圆 + 方形 = 圆形镂空 + 方形边缘”的效果，必须用 mask-image 引入多个 SVG mask，并用 mask-composite 指定运算逻辑。注意：不能用 PNG 或渐变作为多层 mask 的 source，否则 mask-composite 不生效——只有 SVG <mask></mask> 元素才支持复合运算。

mask-image 值需为逗号分隔的多个 url(#id)，且每个 ID 必须指向文档内有效的 <mask></mask>
mask-composite 可选值：add（默认，相当于 union）、subtract（第二层从第一层挖掉）、intersect（只保留重叠区）、exclude（异或）
顺序很重要：mask-image: url(#circle), url(#square) 表示先应用 circle，再用 square 按 mask-composite 规则合成

div {
  mask-image: url(#circle), url(#square);
  mask-composite: subtract;
}

Chrome/Firefox 下的兼容 fallback 怎么写？

没得绕——只能放弃 mask-composite，改用单个 SVG <mask></mask> 手动拼合图形。比如想实现 “圆形减去方形”，直接在 SVG 中用 <circle></circle> + <rect fill="black"></rect> + fill-rule="evenodd" 实现裁剪路径，然后只引用这一个 mask：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

SVG 中用 fill-rule="evenodd" 让重叠区域自动反色（即挖空），比依赖 CSS 合成更可靠
避免在 CSS 里写 mask-composite 同时又指望 Chrome 生效——它会静默忽略，结果就是只显示第一个 mask
若必须动态组合，可用 JS 动态生成 SVG mask 内容并注入 DOM，而非靠 CSS 层叠

容易被忽略的细节：mask-mode 和 color 空间影响结果

即使在 Safari 下，mask-composite 的行为也受 mask-mode 和底层 mask 的颜色值影响。默认 mask-mode: alpha 时，只看 mask 图像的透明度；设为 luminance 则转为灰度后计算——这意味着同一张 SVG，在不同 mask-mode 下可能产生完全不同的合成结果。