如何通过CSS scale和定位技巧实现元素的倒影效果？

本文共计797个文字，预计阅读时间需要4分钟。

因为单纯的翻转会将整个元素（包括内容、事件区域、滚动方向）一起倒过来，用户点击倒影实际点中的是原元素顶部的部分，滚动也会反向。倒影必须是视觉副本，不涉及交互、不干扰布局。

• 必须用 cloneNode() 或伪元素生成独立副本，不能只靠 transform 操控原元素
• scale(-1) 要配合 transform-origin 控制翻转基点，否则倒影位置偏移严重
• 父容器需设 overflow: hidden，否则翻转后的内容可能溢出可见区

伪元素 ::after 实现倒影的三个硬性条件

这是最轻量、兼容性最好的方式，但容易因遗漏关键样式导致倒影不显示或错位。

• 目标元素必须有 position: relative，否则 ::after 无法精确定位
• ::after 必须设 content: "" 和显式尺寸（height / width），否则无渲染盒
• 透明度叠加要用 opacity，不能依赖背景色混合；且需加 transform: scaleY(-1) + transform-origin: top 确保从顶部翻转

div.reflect { position: relative; } div.reflect::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 50%; background: linear-gradient(transparent, rgba(0,0,0,0.2)); transform: scaleY(-1); transform-origin: top; opacity: 0.6; }

clip-path 截取倒影时的 Safari 兼容陷阱

Chrome/Firefox 下用 clip-path: inset(100% 0 0 0) 可快速截掉原图只留倒影，但 Safari 直到 v16.4 才支持 inset() 函数，旧版本会完全失效。

• 生产环境慎用 clip-path 做核心倒影逻辑，尤其面向 iOS 用户
• 可用 mask-image 替代，但要注意 WebKit 需加 -webkit-mask-image 前缀
• 若坚持用 clip-path，务必搭配 @supports (clip-path: inset(0)) 条件加载

倒影边缘模糊用 filter: blur() 的性能雷区

在倒影元素上直接加 filter: blur(2px) 看似简单，但会触发全层重绘，滚动时掉帧明显，尤其在中低端 Android 设备上。

立即学习“前端免费学习笔记（深入）”；

• 模糊应仅作用于倒影本身，避免影响原元素——确保倒影是独立 DOM 节点或伪元素
• 优先用 background: radial-gradient() 模拟渐隐边缘，比 blur() 性能高一个数量级
• 如必须用 blur()，加上 will-change: filter 提前提示浏览器优化，但别滥用

倒影不是视觉糖，是布局链上的一环：它依赖定位上下文、受 transform 层叠上下文影响、对 repaint 敏感。最容易被忽略的是翻转后的 z-index 关系和 pointer-events 状态——倒影节点默认仍响应鼠标事件，得手动关掉。