一、核心原理：纯CSS实现镜像倒影的思路
基本思路与关键CSS
核心理念：借助 CSS 的 transform、伪元素以及渐变遮罩，能够在不依赖 JavaScript 的情况下实现图片的镜像倒影效果。
具体做法是将原图进行 垂直翻转，通过一个与原图同宽高的倒影层叠加在其下方，并应用 mask-image（或其浏览器前缀 -webkit-mask-image）实现从上到下的渐隐。
/* 基本思路：使用一个容器承载图片，伪元素 ::after 作为倒影层 */
.image-wrap {position: relative;width: 320px;/* 图片通过 background-image 设置，便于伪元素继承背景实现复制 */background-image: url('images/photo.jpg');background-size: cover;background-position: center;overflow: hidden;
}
.image-wrap::after {content: "";position: absolute;left: 0;right: 0;top: 100%; /* 倒影位于原图下方 */height: 100%; /* 倒影高度等于原图高度 */background-image: inherit;background-size: cover;background-position: center;transform: scaleY(-1);transform-origin: top;/* 渐隐遮罩，创造倒影逐渐淡出的效果 */-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
容器定位与可复用性：父容器需要 position: relative，倒影层通过 ::after 伪元素实现，无需额外的 DOM 结构，从而保持代码的简洁与可重用性。
二、主流实现方案：几种纯CSS的镜像倒影方案
方案A：伪元素+变换+掩码实现
在容器上使用伪元素 ::after来承载倒影，背景图片可以通过 background-image: inherit 以实现重复使用，避免重复写图片路径。
核心在于通过 transform: scaleY(-1) 翻转倒影，并借助 mask-image（及其前缀 -webkit-mask-image）来实现从上到下的渐变隐藏，形成自然的边界。
/* 方案 A：伪元素实现倒影（inherit 复用背景） */
.image-verse {position: relative;width: 360px;height: 240px;background-image: url('images/landscape.jpg');background-size: cover;background-position: center;overflow: hidden;
}
.image-verse::after {content: "";position: absolute;left: 0;right: 0;top: 100%;height: 100%;background-image: inherit;background-size: cover;background-position: center;transform: scaleY(-1);transform-origin: top;-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
兼容性注意：此方案在大多数现代浏览器中表现良好，但仍需关注 mask-image 对旧版浏览器的兼容性。
方案B：背景+渐变遮罩的简化实现
如果希望结构更简单，可以将倒影直接放在同一背景层上，通过一个伪元素实现翻转和渐隐，而不需要重复定义两次背景图片路径。
此时要点在于背景图统一由父容器承载，并在 ::after 中通过 transform: scaleY(-1) 进行翻转，同时应用渐变遮罩使倒影自然淡出。
/* 方案 B：简化实现，背景共用一个来源 */
.card {--ratio: 0.75;width: 320px;padding-top: calc(320px * (1 / (1/var(--ratio))));height: 0;position: relative;background-image: url('images/forest.jpg');background-size: cover;background-position: center;
}
.card::after {content: "";position: absolute;left: 0;right: 0;top: 100%;height: 100%;background-image: inherit;background-size: cover;background-position: center;transform: scaleY(-1);transform-origin: top;-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}
性能友好性：该方案对图片网格布局具有良好可扩展性，避免额外的脚本开销，适合静态图片库页面。
三、实战案例：如何在图片库中应用纯CSS镜像倒影
示例：卡片组件中的图片倒影
在图片卡片组件中，主图位于卡片上半部分，倒影位于下方，整体形成一个对称的视觉效果，增强用户对图片的关注度。结构简单、可复用，适合图片网格呈现。
要点包括：容器 overflow: hidden、图片自适应宽高、以及倒影伪元素的定位和渐隐效果。
/* 直接用于图片卡片的结构示例：
活动海报
*/
.card { width: 260px; font-family: Arial, sans-serif; }
.image {width: 100%; height: 170px;background-image: url('images/promo.jpg');background-size: cover; background-position: center;position: relative; overflow: hidden;
}
.image::after {content: "";position: absolute;left: 0; right: 0;top: 100%; height: 170px;background-image: inherit; background-size: cover; background-position: center;transform: scaleY(-1); transform-origin: top;-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}
实战中的可调参数包括倒影高度、渐变透明度和渐变方向，建议使用变量或 CSS 自定义属性进行统一控制，以便在不同图片尺寸下保持一致性。
实战要点：动画与响应式适配
在响应式设计中，倒影高度应随图片比例自动缩放，建议通过相对单位（如百分比、视口单位）配合媒体查询实现自适应。
对于交互性较强的页面，可以为倒影添加轻微动画，但需要考虑 用户偏好设置，避免对无障碍用户造成干扰，需关注 prefers-reduced-motion 媒体查询。
四、兼容性与性能注意点
浏览器支持与前缀
现代浏览器对 mask-image、-webkit-mask-image 的支持较好，但对极旧版本可能不完全兼容，请在关键页面进行回退处理，确保不出现布局错位。
总结性强调：在纯 CSS 实现中，伪元素 + transform 与 遮罩渐变 是最常用且高效的组合，能够在不依赖 JavaScript 的情况下实现稳定、可维护的镜像倒影效果。
性能要点与无障碍
使用纯 CSS 的实现通常对页面性能友好，避免复杂的脚本计算，但请注意高分辨率图片的渲染成本，并尽量用 iconfont/现代图片格式 优化资源。
兼容性回退策略
若遇到不可用的遮罩效果，可以将倒影替换为简单的对称副图，或使用渐变遮罩替代方案，以确保在低端设备上的可读性和美观性。
