不能只用单个::before实现流光边框+点击波纹，因二者机制冲突：流光需固定循环动画，波纹需点击点定位与单次扩散，css无法读取鼠标坐标且safari对::before的transform支持不稳定。
纯 CSS 无法用单个 ::before 同时实现「流光边框」+「点击波纹」两种效果——它们底层机制冲突：::before 适合做固定路径的循环动画（如绕边），但波纹必须从点击点出发、中心扩散，且只播一次。强行混用会导致定位错乱、动画打架、移动端失效。
为什么不能只靠 ::before 实现点击波纹
波纹本质是「以点击坐标为圆心、向外 scale 扩散的圆形遮罩」，而 ::before 在多数浏览器（尤其是 Safari 12.1 之前）对 transform 动画支持不稳定；更关键的是，CSS 无法读取鼠标位置，::before 的 left/top 值必须由 JS 注入。若硬塞进 ::before，会和流光所需的 inset: -2px 定位、clip-path 裁剪产生尺寸冲突，导致流光断连或波纹偏移。
-
::before被广泛用于悬停流光，因它可设position: absolute; inset: -2px;撑出边框区域，再用clip-path: inset(2px round 8px)精准抠边 - 波纹必须用
::after：它默认渲染在内容层之上，z-index更可控，且旧版 Safari 对::after的transform支持更稳 - 若坚持只用一个伪元素，波纹只能居中扩散（放弃点击点追踪），且流光动画周期会被波纹中断，视觉上“卡顿”
::after 波纹 + ::before 流光的协作要点
两个伪元素可以共存，但需严格隔离职责和层级。流光走循环动画，波纹走单次触发，互不干扰。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 按钮必须设
position: relative，否则两个伪元素都会脱标到body -
::before负责流光：inset: -2px、background: conic-gradient(...)、animation: glow 3s linear infinite、clip-path: inset(2px round 8px) -
::after负责波纹：content: ""、position: absolute、border-radius: 50%、background: rgba(255,255,255,0.4)、transform: scale(0)、transition: transform 0.4s, opacity 0.4s - 务必给
::after加pointer-events: none，否则会拦截后续点击 - 流光动画加
will-change: transform，波纹加will-change: transform, opacity，尤其在 iOS 上能避免闪烁
移动端点击波纹失效的典型原因与修复
iOS Safari 默认有 300ms 点击延迟，且 :active 在触控下不可靠，纯 CSS 触发的波纹大概率不响应。
- 不要依赖
button:active::after { transform: scale(3); }—— 这在 iPhone 上基本不生效 - 必须用 JS 监听
touchstart（非click），并立即添加类名（如ripple-active） - JS 中通过
getBoundingClientRect()计算点击点相对于按钮左上角的x/y，再设为::after的left/top内联样式 - 波纹结束要手动移除类名或重置
transform，否则连续点击会堆积动画状态 - Safari 15.4 以下不支持
conic-gradient，流光降级用linear-gradient+background-position四段关键帧
最容易被忽略的是两个伪元素的 z-index 和尺寸精度：流光 ::before 必须略大于按钮（inset: -2px），波纹 ::after 必须完全覆盖按钮（width/height: 100%），且两者的 border-radius 数值必须与按钮严格一致，否则转角处会漏光或波纹切边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
