真正可靠的倒影实现是 scale-y-[-1] 配合 origin-bottom、absolute 定位和渐变遮罩，禁用 skew-y；倒影层需脱离文档流、固定高度、同步圆角，并在移动端隐藏以保障性能与体验。
用 skew-y 和 scale-y 模拟倒影，不是真反射
Tailwind 本身没有 reflect 类，所谓“倒影”只能靠视觉欺骗：复制元素、垂直翻转、压扁、加渐变遮罩。关键不是“怎么画”，而是“怎么不让它漏馅”。skew-y 是干扰项——它会让倒影歪斜失真，实际项目里基本不用；真正可靠的是 scale-y-[-1] 配合 transform 组合。
-
scale-y-[-1]必须配合origin-bottom，否则翻转会以元素中心为轴，导致倒影飘在半空 - 复制的倒影层要用
opacity-20到opacity-40，太透看不清，太实像镜面不像影子 - 别用
skew-y想“拉出角度感”，它会破坏边缘对齐，尤其文字或圆角容器下特别明显
倒影层必须脱离文档流，否则影响布局
直接写两个相同元素并翻转，会导致父容器高度翻倍——因为翻转后的元素仍占位。常见错误是只加 scale-y-[-1]，忘了定位。
- 给倒影容器加
absolute+inset-x-0+bottom-0，再配origin-bottom - 父容器得设
relative，不然absolute会往上层找定位上下文 - 如果原图带
border-radius，倒影也要同步加，否则圆角接不上，露出直角缺口
渐变遮罩用 bg-gradient-to-t，别用伪元素
纯 CSS 倒影需要顶部透明到底部不透明的遮罩，模拟现实中的衰减。很多人用 before 伪元素，但 Tailwind 下更稳的是直接在倒影层上叠一层渐变背景。
- 遮罩层用
bg-gradient-to-t from-gray-200/0 via-gray-200/20 to-gray-200/50（注意/0写法支持透明度） - 渐变方向必须是
to-t（向上），因为倒影是倒着的，方向反了就白遮 - 别用
rgba()手写颜色，Tailwind 的/20后缀更可靠，兼容所有版本
响应式下倒影容易错位，得锁死高度
当原图宽高比随屏幕变化时，scale-y-[-1] 会把倒影拉伸变形。比如图片从 4:3 变成 16:9，倒影高度没同步缩放，就会出现“断层”或“重叠”。
- 给倒影层固定
h-16或h-20（根据设计稿定死像素值），而不是用h-full - 如果必须适配不同图高，改用
aspect-video等约束父容器比例，再让倒影继承 - 移动端慎用倒影——小屏下本体+倒影挤在一起，反而降低可读性，建议用
md:hidden直接关掉
倒影本质是装饰性视觉糖，不是功能必需。最常被忽略的点是：它会让 Lighthouse 的“CLS（累积布局偏移）”分数变差，因为翻转和定位操作容易触发重排。上线前记得开 DevTools 的 Rendering 面板勾选“Layout Shift Regions”看看有没有意外抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
