box-reflect 已被废弃，Chrome 2015年移除、Firefox从未支持、Safari现亦失效；应改用 ::after + transform + mask-image 伪元素方案实现倒影效果。
box-reflect 在现代浏览器里基本不能用
Chrome 早在 2015 年就移除了 box-reflect 的支持，Firefox 从未实现，Safari 虽然保留了一段时间，但只支持 WebKit 内核老版本（如 macOS 10.10 以前），现在连 -webkit-box-reflect 都已失效。强行写上只会被忽略，连 warning 都不会报。
常见错误现象：box-reflect: below; 写了没反应，开发者工具里该属性直接灰掉、不生效；查文档发现 MDN 标记为「Deprecated」。
- 别在新项目里尝试兼容
box-reflect，它不是“暂时不支持”，而是“已被废弃” - 如果维护老代码看到它，优先替换为伪元素方案
- 它的语法本身也不灵活：无法控制倒影透明度渐变节奏、不能加模糊、不能响应式缩放
::after 伪元素 + transform + mask-image 是目前最稳的倒影方案
核心思路是：用 ::after 复制按钮内容 → 垂直翻转 → 定位到底部 → 用 mask-image 做线性渐隐。比老式 opacity + linear-gradient 背景遮罩更精准，兼容性也更好（Chrome 82+、Firefox 84+、Safari 15.4+）。
使用场景：需要真实倒影感的营销页按钮、卡片悬停效果、设计系统中强调视觉层次的 CTA。
立即学习“前端免费学习笔记（深入）”；
- 必须给按钮设
position: relative，否则::after无法精确定位 -
transform: scaleY(-1)翻转时，注意按钮如果有圆角（border-radius），倒影边缘也会翻转出错，得在伪元素里重置border-radius: 0 -
mask-image: linear-gradient(to bottom, black, transparent)中的black表示完全显示，transparent表示完全隐藏——顺序不能反 - 性能友好：纯 CSS，不触发重排，GPU 加速自然启用
button {
position: relative;
}
button::after {
content: attr(data-text, "Click");
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: scaleY(-1);
border-radius: 0;
mask-image: linear-gradient(to bottom, black, transparent);
opacity: 0.2;
}
遇到 Safari 15.3 及更早版本要降级用 background-gradient 遮罩
Safari 15.3 不支持 mask-image（只支持旧版 -webkit-mask-image），且对 attr() 在伪元素中的支持不一致。这时候得切到兼容 fallback 方案：不用 mask-image，改用 background + linear-gradient 覆盖底部区域。
参数差异明显：mask-image 控制“显示区域”，background 方案本质是“遮盖区域”，所以渐变方向和颜色逻辑要反过来。
- 把
mask-image: linear-gradient(to bottom, black, transparent)换成background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)) - 伪元素的
z-index必须设为负值（如z-index: -1），否则白底会盖住主按钮 - 这个方案在高缩放比（如 125% 系统缩放）下可能出现 1px 锯齿，属于渲染限制，无法根治
文字按钮倒影容易糊？关键是字体渲染和缩放对齐
倒影文字发虚、边缘锯齿、和原按钮错位 1px，90% 是因为字体抗锯齿策略和 subpixel rendering 导致的。尤其在 Windows Chrome 或启用了 font-smoothing: antialiased 的环境下更明显。
解决点很具体：
- 确保伪元素和原按钮用完全相同的
font-family、font-size、line-height和font-weight，哪怕父级继承也要显式声明 - 避免用
em或rem做top偏移，统一用px（比如top: calc(100% + 2px)），防止小数像素累积偏移 - 如果按钮有
text-transform: uppercase，伪元素也得加上，否则大小写转换时机不同会导致宽度微差 - 真正难搞的是 emoji 或可变字体（variable font），它们的 baseline 渲染行为不一致，建议这类按钮放弃倒影
倒影不是装饰糖，它依赖像素级对齐和渲染一致性。调一个按钮可能花十分钟，但上线后用户一眼就能感知是否“假”。
