box-shadow模拟倒影是首选方案：通过伪元素+transform: scaleY(-1)+box-shadow+opacity实现悬停倒影，兼容IE10+、不触发重排、可控性强；须避免直接翻转原元素，并注意Safari的scaleY(-1)渲染bug及z-index裁切问题。
用 box-shadow 模拟倒影最简单也最可控
纯 CSS 实现鼠标悬停倒影，box-shadow 是首选——它不改变 DOM 结构、不触发重排、兼容性好（IE10+），且能精准控制模糊度、偏移和透明度。关键不是“画出倒影”，而是“伪造视觉错觉”：在元素下方叠加一个垂直翻转、半透明、带模糊的阴影。
常见错误是直接用 transform: scaleY(-1) 翻转元素本身，这会导致整个元素（包括内容、交互区域）上下颠倒，悬停失效或点击错位。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给目标元素（如
<img>或<div>）设position: relative - 用
::after伪元素生成倒影：设置content: ""、position: absolute、top: 100%、left: 0、width: 100%、height: 80%（按需调整） - 倒影本身不渲染内容，靠
box-shadow拉出来：box-shadow: 0 10px 20px rgba(0,0,0,0.2)；再配合transform: scaleY(-1)和opacity: 0.5模拟翻转+衰减 - 只在
:hover时显示伪元素，避免默认渲染影响性能
filter: blur() + transform: scaleY(-1) 的组合必须加 will-change: transform
如果倒影需要更真实的渐隐效果（比如图片边缘自然消散），仅靠 box-shadow 模糊不够，就得用 filter: blur() 处理伪元素。但此时 Chrome/Firefox 在快速悬停进出时容易出现闪烁或绘制延迟——本质是 GPU 合成层未提前准备。
立即学习“前端免费学习笔记（深入）”；
解决方法不是加更多动画属性，而是明确告诉浏览器：“这个元素的 transform 会变”。否则模糊+翻转叠加会触发频繁的层重建。
实操建议：
- 伪元素上加
will-change: transform（注意：只在 hover 时加，避免全局开销） -
filter: blur(2px)值不宜超过 3px，否则移动端严重掉帧 - 慎用
backdrop-filter替代，它不适用于倒影场景，且 Safari 对伪元素支持不稳定 - 若倒影需跟随图片透明度变化，不要对伪元素单独设
opacity，改用rgba()调整box-shadow颜色值的 alpha 通道
SVG <feGaussianBlur> 倒影适合复杂图形但无法响应 hover
当倒影要贴合不规则图形（比如带透明通道的 PNG 图标、SVG 路径），CSS 的矩形伪元素会露底或错位。这时得用 SVG <filter> 定义倒影效果，并通过 filter 属性引用。
但致命限制是：SVG filter 中的 <feGaussianBlur> 无法直接绑定 hover 状态切换。你不能写 svg:hover filter="url(#reflection)" 并期望倒影动态出现——滤镜本身是静态定义的，是否应用取决于宿主元素的 CSS 规则。
实操建议：
- 把 SVG
<filter>写在<defs>里，用 ID 引用；宿主元素用filter: url(#reflection) - hover 控制仍需靠外部 CSS：例如给容器设
opacity: 0.9，再用filter的feComposite混合模式叠加倒影，但逻辑复杂且调试困难 - 真正需要动态倒影的复杂图形，建议改用 Canvas 绘制，由 JS 控制帧级渲染，而非强求 CSS/SVG
移动端 Safari 的 transform: scaleY(-1) 有渲染撕裂风险
iOS 15–16 的 Safari 对 scaleY(-1) 在伪元素上的合成处理存在 bug：倒影边缘可能出现 1px 锯齿、文字反向模糊，或悬停瞬间闪白。这不是抗锯齿问题，而是 WebKit 渲染管线中翻转层与模糊层的采样顺序错乱。
绕过方式不是降级效果，而是换一种“翻转”逻辑：
- 不用
scaleY(-1)，改用transform: matrix(1, 0, 0, -1, 0, 0)—— 同样是垂直翻转，但绕过 Safari 对 scale 的特殊优化路径 - 倒影高度设为
height: 75%而非100%，留出 1px 缓冲区避免边缘拉伸失真 - 禁用
-webkit-backface-visibility: hidden（它反而加剧撕裂），改用transform: translateZ(0)强制硬件加速 - 真机测试必须覆盖 iOS 15.7 和 iOS 16.4，这两个版本表现差异极大
倒影看似简单，但跨浏览器一致性差、性能敏感点隐蔽，最容易被忽略的是：伪元素的 z-index 层级没压住父容器的边框或背景，导致倒影被裁切——检查 overflow: hidden 是否误加在父级上。
