CSS 动画渐变边框生成器

旋转彩虹边框看起来很简单，直到你真正尝试在 CSS 中构建一个：用普通的自定义属性在 conic-gradient() 内设置角度动画没有任何用处，因为浏览器不知道该值是一个角度，并且无法在 0deg 和 360deg 之间进行插值 - 它只是跳跃。该生成器使用真正的修复，CSS 属性和值 API：`@property --border-angle { 语法：'<angle>';初始值：0deg；继承：假； }` 确切地告诉浏览器自定义属性拥有什么样的值，这可以在 @keyframes 规则中解锁平滑、GPU 友好的插值。

环本身是一个 ::before 伪元素，大小比框大（插入减去边框宽度），其背景设置为 `conic-gradient(from var(--border-angle), ...)` 循环回第一种颜色，因此扫描没有可见的接缝。然后，掩码执行真正的整形工作：掩码：线性渐变（＃000 0 0）内容框，线性渐变（＃000 0 0）; mask-composite: except;` 仅保留填充框和内容框之间的环形差异，丢弃其他地方的实心渐变矩形。 Safari 较旧的“-webkit-mask-composite: xor”执行相同的操作并与标准属性一起提供，因此效果会一致呈现，而不是在一个引擎上默默地失败。

边框半径支持并不是事后添加的——伪元素的“边框半径：继承”意味着您拨入框中的任何半径都会自动带入环上，因此药丸形按钮或圆形卡片会获得圆形发光边框，而不是从弯角渗出的直边。现场测试：将半径滑块从尖锐的矩形拖动到完整的药丸，并观察环在每一步都遵循形状，这是区分该技术的真实实现与虚假屏幕截图的细节。

页面上的其他所有内容都直接映射到生成的代码上：宽度滑块是环的厚度和伪元素的插入/填充，持续时间滑块是 @keyframes 动画持续时间，方向开关只是翻转关键帧结束角度的符号（+360deg 或 -360deg），每个颜色停止点是 conic-gradient() 调用内以逗号分隔的条目。整个过程在您的浏览器中运行，没有图像，没有 JavaScript 驱动的动画循环，也没有外部服务 - 复制 CSS 块，无论您将其粘贴到哪里，它都会不断旋转。