倒影必须是视觉副本而非原元素翻转，需用伪元素或clonenode创建独立节点；::after实现需满足position:relative、content:""与显式尺寸、opacity+scaley(-1)+transform-origin三个条件。
用 transform: scale(-1) 翻转元素做倒影，为什么不能直接套用
因为单纯翻转会把整个元素（包括内容、事件区域、滚动方向）一起倒过来，用户点击倒影实际点中的是原元素顶部，滚动也会反向。倒影必须是“视觉副本”，不参与交互、不干扰布局。
- 必须用
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提前提示浏览器优化，但别滥用
z-index 关系和 pointer-events 状态——倒影节点默认仍响应鼠标事件，得手动关掉。 
