HTML按钮无原生倒影属性，可用filter: drop-shadow()模拟投影式倒影（适用于浅色背景）或::after伪元素+transform: scaleY(-1)实现真镜像倒影（兼容深浅背景但需手动控制），-webkit-box-reflect已废弃。
用 filter: drop-shadow() 实现轻量倒影，别碰 box-shadow
HTML 原生图片加倒影，最稳妥的方式不是 JS 拆图、也不是伪元素遮罩，而是 CSS filter: drop-shadow()。它能直接作用于 <img> 元素，且随图片缩放自动适配——响应式下不会错位。
常见错误是误用 box-shadow：它只投射在元素盒模型外沿，无法模拟真实倒影的渐变透明+垂直翻转效果；而 drop-shadow() 是 SVG 滤镜，基于图像 Alpha 通道投射，天然支持模糊+偏移+透明度控制。
-
drop-shadow(0 8px 12px rgba(0,0,0,0.2))中的0表示水平偏移为 0，8px是向下偏移（即倒影位置），12px是模糊半径，rgba(0,0,0,0.2)控制颜色和透明度 - 响应式关键：该滤镜会随图片宽高变化自动重计算，无需媒体查询干预；但若图片用
max-width: 100%+height: auto，倒影高度也会同比缩放 - 兼容性注意：
drop-shadow()在 IE 完全不支持，Edge 16+、Chrome 53+、Firefox 35+ 均可用；如需兼容 IE，得降级为transform: scaleY(-1)+ 伪元素方案（但会破坏响应性）
倒影方向与透明度必须用 transform: scaleY(-1) 配合 opacity 手动调
仅靠 drop-shadow() 只能“投”出一个模糊色块，没有上下翻转感，也不易控制倒影长度。真正像倒影的样子，需要把图片本身翻转后叠加在下方，并设为半透。
实操中推荐「原图 + 翻转副本」双层结构，用 position: relative 容器包裹：
立即学习“前端免费学习笔记（深入）”；
<div class="reflected-img"> <img src="photo.jpg" alt="main"> <img src="photo.jpg" alt="reflection" class="reflection"> </div>
- 主图保持正常显示；副本图添加
transform: scaleY(-1)实现垂直翻转 - 副本图用
opacity: 0.25～0.4控制透明度，太低看不见，太高失真 - 副本图用
margin-top: -4px（或top: -4px）微调位置，消除翻转后默认留白；具体值取决于图片自身下边距和模糊需求 - 副本图必须设
display: block，否则行内默认间距会导致错位
响应式下避免倒影被截断：给容器加 overflow: visible 和足够 padding-bottom
翻转后的副本图默认向上溢出父容器，而多数响应式布局（如 Flex/Grid 容器、overflow: hidden 的卡片）会直接裁掉它——看起来倒影消失了。
- 父容器必须显式声明
overflow: visible，不能依赖默认值（某些 UA 样式会设为hidden） - 为防止翻转图顶到上层内容，给容器加
padding-bottom: 30%（推荐百分比而非固定 px，适配不同宽高比） - 如果副本图用了
transform: scaleY(-1)，其占据的文档流高度仍为原图高度，所以padding-bottom要至少等于倒影视觉高度（通常为原图高的 20%～35%） - 不用
height或min-height强控容器高度——那会破坏响应式弹性
移动端 Safari 的 drop-shadow() 性能陷阱
iOS 15–16 的 Safari 对 drop-shadow() 有渲染缓存缺陷：快速缩放或滚动时，倒影可能残留、错位甚至消失，尤其在 will-change: transform 或 backface-visibility: hidden 共存时。
- 临时规避：对副本图单独加
transform: translateZ(0)强制 GPU 加速，但别加在主图上（会引起闪烁） - 更稳方案：改用
filter: url(#reflection)引用内联 SVG 滤镜（需在<svg>中定义），Safari 对 SVG 滤镜的稳定性更好 - 别在
@media (prefers-reduced-motion: reduce)下启用倒影——不仅多余，还可能触发 Safari 的动画卡顿 bug
倒影本质是视觉增强，不是功能必需；当设备性能或兼容性明显受限时，宁可降级为纯色底边线或直接隐藏副本图，也别强撑效果导致布局抖动或内存飙升。
