box-reflect 已被 Chrome、Firefox、Edge 彻底弃用，仅旧版 Safari（macOS 10.10+ 的 Safari 6.1–13.1）支持，iOS Safari 14+ 也已移除，现代浏览器中无效且不推荐使用。
box-reflect 能用吗？先看浏览器支持
不能直接用 box-reflect 做生产环境的倒影效果——它早已被 Chrome、Firefox、Edge 彻底弃用，Safari 是唯一还保留支持的浏览器，且仅限旧版（macOS 10.10+ 的 Safari 6.1–13.1），iOS Safari 从 14 开始也移除了。你写 box-reflect: below;，在现代 Chrome 里完全没反应，连 devtools 都会标灰提示“invalid property value”。
常见错误现象：box-reflect 写了但页面毫无变化；开发者工具里该属性被划掉；查 MDN 显示 “Non-standard” 并标注 “Deprecated”。
- 别再查“
box-reflect怎么设置距离”，它已经不是有效 CSS 属性了 - 兼容性影响：全平台现代版本均不可靠，尤其微信内置浏览器、Android WebView、新版 Edge 全部不认
- 如果你只是想快速预览效果，可临时用 Safari 技术预览版（TP）测试，但别当真
用 transform + clip-path 模拟倒影（主流方案）
目前最可控、兼容性最好的做法是：手动复制文本元素，用 transform: scaleY(-1) 翻转，再用 clip-path 或 mask-image 控制可见区域，模拟渐隐倒影。
使用场景：标题倒影、卡片文案装饰、海报类 H5 页面；不适合高频重绘或滚动中大量使用的场景（性能敏感）。
立即学习“前端免费学习笔记（深入）”；
- 必须给原元素设
position: relative，倒影元素设position: absolute并定位到底部 - 翻转后文字上下颠倒，要用
transform-origin: center bottom确保翻转轴在底部边缘，否则倒影位置偏移 -
clip-path: inset(100% 0 0 0)可以隐藏原始内容只留倒影；更推荐用mask-image: linear-gradient(to bottom, transparent, black)实现自然渐隐
/* 示例：一个带渐隐倒影的 h2 */
h2 {
position: relative;
display: inline-block;
}
h2::after {
content: attr(data-text);
position: absolute;
top: 100%;
left: 0;
transform: scaleY(-1);
transform-origin: center bottom;
mask-image: linear-gradient(to bottom, transparent, #000);
/* 或用 -webkit-mask-image 兼容旧 Safari */
}用 SVG <feTurbulence> 做动态倒影？不现实
有人搜“CSS 倒影模糊”会撞见 SVG 滤镜方案，比如用 <feTurbulence> 或 <feGaussianBlur> 加噪点/模糊模拟水面扰动效果。这理论上可行，但实际落地极难：
- SVG 滤镜需内联定义或外部引用，无法通过 class 批量复用
-
feGaussianBlur在 Firefox 中对::after伪元素支持不稳定；Chrome 对mask+filter组合渲染有闪烁问题 - 性能开销明显：每个倒影都要走完整 SVG 渲染管线，滚动时掉帧明显
- 移动端兼容性更差，iOS Safari 对
<filter>的primitiveUnits解析常出错
真正该关注的：语义与可访问性
倒影是纯装饰效果，但很多人忘了加 aria-hidden="true" 或 role="presentation"。如果倒影是用额外 DOM 元素（比如 <span class="reflection">）实现的，屏幕阅读器可能把它当作独立文本重复朗读。
- 所有用于视觉倒影的副本节点，必须加
aria-hidden="true" - 不要用
visibility: hidden或opacity: 0替代aria-hidden，它们不阻止 AT（辅助技术）抓取 - 如果倒影包含关键信息（比如倒影里写了时间戳），那就不是装饰，不该用倒影实现——这是设计层面的误用
复杂点在于：倒影的渐变透明度、翻转精度、响应式缩放对齐，每换一个字体或字号都得重新调。没人会为一行标题花 20 分钟调 transform-origin 和 mask-position，所以真正上线前，建议只对静态大标题用，小字或动态内容绕开。
