mask

背景 在为 ACMUSIC（网易云第三方客户端）的私人FM模块添加镜面倒影效果时，遇到了一个有趣的技术挑战：镜面倒影明明 DOM 结构正确、transform 也没问题，但就是不可见。这篇文章记录了排查过程和最终的解决方案。 1. 三层结构设计 倒影系统采用三层嵌套结构： .fm-card-wrapper（3D 变换容器） ├─ .fm-card（封面卡片，340×340, border-radius 28px） └─ .fm-reflection-plane（倒影裁剪平面） └─ .fm-reflection（倒影元素，scaleY(-1) 翻转） └─ img（封面图片，340×340） 关键设计思路： plane：position 在卡片正下方，overflow: hidden + border-radius: 28px 负责裁剪倒影可见区域和圆角 reflection：position 在 plane 内部，通过 transform: scaleY(-1) 实现垂直镜像 img：复用封面图片，object-fit: cover 填充 2. 核心 CSS 2.1 Plane——裁剪平面 1 2 3 4 5 6 7 8 9 10 11 12 .fm-reflection-plane { position: absolute; left: 0; top: 100%; // 紧贴卡片底部 width: 100%; height: 410px; // 关键：高度要足够大 overflow: hidden; // 裁剪可见区域 pointer-events: none; border-radius: 28px; // 与卡片圆角一致 // 真正的可见高度由 clip-path 控制 clip-path: inset(0 0 300px 0); // 顶部 110px 可见 } 2....