HTML按钮无原生倒影属性，现用filter: drop-shadow()模拟投影式倒影（适用于浅色背景）或::after伪元素+transform: scaleY(-1)实现真镜像倒影（兼容深浅背景但需手动控制），-webkit-box-reflect已废弃。
HTML 按钮本身没有原生倒影属性，CSS 也早已废弃 filter: drop-shadow() 之外的“倒影”专用语法（比如旧版 WebKit 的 -webkit-box-reflect）——现在统一用 filter 或伪元素模拟，但效果和兼容性差异很大。
用 filter: drop-shadow() 快速加投影式“倒影”
这不是真正镜像倒影，而是向下偏移+模糊的阴影，视觉上近似浅色背景下的简易倒影。优点是简单、硬件加速、支持动画。
- 只适用于浅色背景（深色背景里阴影看不见）
-
drop-shadow()参数顺序是：drop-shadow(<offset-x> <offset-y> <blur-radius> <color>)，倒影需设负offset-y并加大blur-radius - 例如：按钮悬停时加倒影：
button:hover { filter: drop-shadow(0 -8px 12px rgba(0,0,0,0.15)); } - 注意：它作用于整个元素盒模型，若按钮有圆角或图标，阴影边缘也会模糊，不是严格镜像
用 ::after 伪元素 + transform: scaleY(-1) 做真镜像倒影
这是目前最可控的真倒影方案，本质是复制一层内容并垂直翻转，再定位到按钮下方。适合深/浅背景通用，但需手动控制透明度和遮罩。
- 必须给按钮设
position: relative，否则伪元素无法精确定位 - 伪元素内容要继承按钮文字/背景，常用
content: attr(data-text)或直接写死（不适合动态文本） - 关键样式：
transform: scaleY(-1); opacity: 0.2; top: 100%; margin-top: 4px; - 强烈建议加
pointer-events: none，避免伪元素干扰点击 - 若按钮有渐变背景，伪元素无法自动继承——得用
background: inherit并确保父级背景可继承（线性渐变通常不行，需重写）
-webkit-box-reflect 已淘汰，别再用
这是 Safari 5.1–6.0 和旧 Chrome 支持的私有属性，语法如 -webkit-box-reflect: below 0 linear-gradient(to bottom, transparent, #0002);。但它：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在现代 Safari（15.4+）、Chrome（85+）、Firefox 中完全失效
- 无法用 JS 动态控制反射长度或渐变
- 遇到
border-radius或overflow: hidden时渲染异常 - MDN 和 Can I Use 都标记为“Deprecated”，构建工具（如 Autoprefixer）默认不处理
倒影在高DPI屏或缩放场景下的常见问题
无论用哪种方式，实际项目中容易忽略像素对齐和缩放适配：
- 用
transform: scaleY(-1)时，若按钮高度是奇数像素（如 33px），翻转后可能糊边——建议设偶数高度或用transform: scale(1, -1)配合top: calc(100% + 1px) -
drop-shadow()在 Windows 缩放 125% 时，模糊半径会被放大，导致倒影过重——可配合@media (-webkit-min-device-pixel-ratio: 1.25)单独调参 - 伪元素倒影若用
background-image模拟，记得加background-size: cover，否则高DPI下图案拉伸失真
真倒影不是加个 CSS 就完事——它牵扯定位精度、背景继承、缩放响应、甚至按钮是否含 SVG 图标（SVG 在伪元素里需重新定义尺寸）。选方案前先问清楚：只要视觉近似，还是必须镜像保真？前者用 drop-shadow()；后者就绕不开伪元素+手工微调。
