纯CSS按钮边框流光环绕效果通过::before伪元素+conic-gradient/linear-gradient+rotate或background-position动画+clip-path裁剪实现，不依赖JS和box-shadow。
纯 CSS 实现按钮边框流光环绕效果，**不依赖 JavaScript，也不靠 box-shadow 模拟“发光”**，核心是用伪元素 + 渐变 + 动画构造一个视觉上“绕边流动”的光带。关键不在“边框”本身，而在覆盖其外的一层动态遮罩或旋转渐变。
用 ::before 伪元素模拟流光路径
真正实现“环绕”感的方案，是让一个比按钮略大的伪元素（::before）承载线性或圆锥渐变，并通过 animation 控制它的位移或旋转，再用 clip-path 或 mask 把它裁成“只露出边缘”的形态。
- 直接给
border加动画做不到“流光”，因为 CSS 不允许对border-color做渐变过渡 -
::before必须设为position: absolute，且inset: -2px（或类似负值）才能撑出边框区域 - 推荐用
conic-gradient配合rotate动画：它天然适合环形路径，比线性渐变位移更可控 - 若需兼容 Safari 15.4 以下或旧版 Chrome，改用
linear-gradient+background-position位移，但需手动写四段关键帧模拟绕边
clip-path 裁剪比 mask 更稳妥
mask 虽灵活，但在部分安卓 WebView 和 Safari 中存在渲染闪烁或失效问题；clip-path 兼容性更好（Chrome 55+/Safari 9.1+/Firefox 54+），且性能开销更低。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
clip-path: inset(2px round 6px)可精准抠出“内缩 2px 的圆角矩形”，让伪元素只在按钮外围显示 - 避免用
polygon()手动描点——坐标稍有偏差就会漏光或断连 - 如果按钮圆角是
8px，clip-path的round值必须严格匹配，否则流光在转角处会跳变
@keyframes 动画节奏决定真实感
流光“快而不乱、慢而不滞”全靠动画时长和缓动函数。常见错误是用 ease-in-out 导致起止卡顿，或周期太短（
立即学习“前端免费学习笔记（深入）”；
- 推荐动画周期设为
3s～4s，配合linear缓动，保证匀速流动感 - 悬停时可缩短至
2s，用.glow-btn:hover::before { animation-duration: 2s; } - 不要用
transform: rotate()直接旋转变形按钮内容——它会带动文字一起转，必须确保::before和内容层（z-index）分离 - 若用
conic-gradient，动画只需驱动自定义属性（如--angle）或直接rotate，比操作background-position更简洁
最易被忽略的是伪元素的层级与尺寸精度：inset: -2px 和 clip-path: inset(2px round Xpx) 必须数值对称，否则流光会在某一边突然变宽或消失；另外，所有动画都应加 will-change: transform 提前告知浏览器优化，尤其在移动端。
