纯CSS无法实现点击点定位波纹，必须用JS获取clientX/clientY并结合getBoundingClientRect()计算相对坐标；:active伪类只能固定从中心触发，且需注意移动端触摸、禁用态拦截、transitionend清理等细节。
纯CSS波纹效果只能从中心触发，别硬套:active + radial-gradient
想用纯CSS做出Material Design那种“点击哪就从哪炸开”的波纹？做不到。所有声称“纯CSS实现精准定位波纹”的方案，实际运行时都固定从top: 50%; left: 50%出发——因为:active伪类拿不到clientX/clientY，CSS本身无法读取鼠标坐标。
常见踩坑点：
- 直接写
button:active { background: radial-gradient(circle at center, ...); }——这会覆盖按钮原有背景色，且永远炸在正中，视觉上明显失真 - 漏设
position: relative，导致::after伪元素相对于body定位，波纹飞出按钮边界 - 没加
overflow: hidden，扩散动画溢出圆角或边框，破坏设计一致性
如果只要轻量反馈（比如移动端大按钮、后台管理界面），用::after + transform: translate(-50%, -50%) scale()是合理选择；但若设计稿明确要求点击点定位，必须上JS。
真正还原Material波纹，必须用getBoundingClientRect()算相对坐标
原生<button>没有波纹，不是缺陷，是规范使然——Material的涟漪本质是交互逻辑，不是样式规则。要让它从点击点出发，核心只有一步：e.clientX - rect.left和e.clientY - rect.top。
立即学习“前端免费学习笔记（深入）”；
关键实操细节：
- 别用
offsetLeft/offsetTop：受父级transform、滚动、fixed定位干扰，结果不可靠 - 移动端必须处理
e.touches?.[0]，并调用e.preventDefault()防误触发滚动 - 直径建议取
Math.max(btn.clientWidth, btn.clientHeight) * 2，确保覆盖全按钮区域 - 禁用态必须拦截：
if (btn.disabled || btn.matches(':disabled')) return，否则键盘空格仍能触发波纹
动画结束清理不能靠setTimeout(600)——用户改了CSS里的transition-duration，你的延时就失效了。必须监听transitionend事件动态移除DOM节点。
position: fixed做悬浮按钮，90%概率在iOS上错位
FAB（Floating Action Button）用position: fixed看似省事，但在真实场景中极易失效：iOS软键盘弹出后按钮卡在错误Y轴、横向滚动时悬停位置偏移、父容器有transform会让fixed退化为absolute。
更稳的方案是：
- 把按钮包进
<div class="fab-container">，容器设position: relative，挂载在body直系子级 - 按钮自身用
position: absolute+bottom: env(safe-area-inset-bottom, 16px)，兼容刘海屏与iOS安全区 - 用
scroll-margin-bottom: 80px替代margin-bottom，避免滚动到底部时遮挡内容 - 点击热区必须≥48px×48px，视觉尺寸可小（如36px），但
padding或min-width/min-height得撑够
流光动画别堆box-shadow：三层以上阴影在低端Android上掉帧。改用filter: blur(8px) + 伪元素径向渐变，动画只驱动transform和opacity。
霓虹发光按钮的box-shadow分层不是炫技，是必要结构
单层box-shadow做不出透光感。真正可用的霓虹效果必须分层：
- 内层：
0 0 5px #00aaff——贴边微光，模拟灯管本体 - 中层：
0 0 15px #00aaff——主扩散晕，模糊加大、颜色略浅 - 外层：
0 0 30px #0055ff, 0 0 60px #002288——长尾衰减，体现空气散射 - 别漏
inset 0 0 10px rgba(0,100,255,0.3)——给表面加内发光，提升立体感
阴影色相必须匹配背景渐变走向：背景左蓝右青，阴影也得分层对应；饱和度要比背景低、明度略高，否则发脏。IE11不支持rgba()在box-shadow里的alpha通道，保底方案是加一层2px solid #00aaff边框。
最易被忽略的是：悬停时不要新增阴影层级，而应在默认状态就写全所有层，仅过渡blur-radius和opacity——突增层数会导致重绘抖动，尤其在iOS Safari上明显卡顿。
