用伪元素+conic-gradient+clip-path是实现按钮动态锥形边框的最简可控方案，因border-image不支持conic-gradient，需通过::before绘制渐变环、inset裁剪留外圈、animation驱动from/to角度变化实现旋转效果。
用 conic-gradient 实现按钮动态锥形边框
直接用 conic-gradient 配合 background 和 background-clip: text 或遮罩层模拟“边框”效果，HTML 原生 <button> 没有 border-image 支持锥形渐变，硬套会失效。
真正可行的路径是：把渐变画在伪元素或额外容器上，再通过定位+裁剪“露出”一圈动态环。核心不是改 border，而是造一个视觉等效的动态外环。
-
conic-gradient必须作用于块级背景（background），不能直接赋给border - 动态效果靠
@keyframes旋转整个背景角度，例如background-position: 0 0不起作用，得用background: conic-gradient(...) rotate(0deg)—— 但注意：CSS transform 不影响background，所以必须用background的 angle 参数动画，即background: conic-gradient(from 0deg, ...) - 为避免文字被渐变覆盖，按钮内容需用
position: relative+z-index盖在渐变层上方
纯 CSS 实现（无 JS，兼容 Chrome/Firefox/Edge 111+）
下面这段代码在按钮外层加 <span> 包裹，用伪元素画锥形环，再用 mask-border 或更稳的 clip-path 裁出边框宽度：
.btn-conic {
position: relative;
padding: 12px 24px;
background: none;
border: none;
color: #333;
font-weight: 600;
}
.btn-conic::before {
content: '';
position: absolute;
inset: -4px; /* 控制“边框”宽度 */
border-radius: 8px;
background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #44b5b1, #feca57);
animation: rotateConic 3s linear infinite;
z-index: -1;
clip-path: inset(4px round 8px); /* 把中间挖空，只留外圈 */
}
@keyframes rotateConic {
from { background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #44b5b1, #feca57); }
to { background: conic-gradient(from 360deg, #ff6b6b, #4ecdc4, #44b5b1, #feca57); }
}关键点：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
inset(4px round 8px)是裁掉内区的可靠方式，比mask-border兼容性好得多 -
conic-gradient动画必须写满from→to的完整角度变化，只改from值无法触发重绘（部分浏览器会跳帧） - 如果按钮是圆角，
clip-path: inset(... round ...)的圆角值要和按钮自身border-radius一致，否则边缘撕裂
IE 或旧版 Safari 怎么降级？
锥形渐变在 Safari ≤ 15.4、iOS ≤ 15.4、所有 IE 版本中完全不支持，conic-gradient 会回退成透明，按钮只剩文字+空白背景。不能靠 @supports 精准检测，稳妥做法是：
- 用
@supports (background: conic-gradient())包裹动态样式，内部再设一层 solid border fallback - 避免用
conic-gradient做功能依赖（比如靠它显示状态），仅作装饰增强 - 若必须支持旧 Safari，改用
radial-gradient+ 多层旋转动画模拟近似效果（性能差、控制弱，不推荐）
为什么不用 border-image + conic-gradient？
因为 border-image 只接受线性/径向渐变，规范明确不支持 conic-gradient。尝试写 border-image: conic-gradient(...) 1 会被浏览器静默忽略，DevTools 里显示为 none。
这不是 bug，是 CSS Image Values Level 4 的限制。目前唯一绕过方式是 SVG <pattern> + border-image 引用，但 SVG 中锥形渐变需用 <conicGradient>（仅 Firefox 支持），实际不可行。
所以别在 border 上死磕——用伪元素 + clip-path 是当前最简、最可控、兼容性最好的方案。
