V-06

渐变描边

Gradient Border

描边不是一种颜色，而是一条渐变沿着元素轮廓走一圈。

又叫：
渐变边框
彩色描边
渐变边
border gradient
gradient stroke
rainbow border

展厅: 视觉质感
形态: 固定舞台
播放: 常驻循环
关键词: 纯 CSS / 渐变 / 新 CSS 特性 / 先查兼容

V-06形态固定舞台播放常驻循环Gradient Border

参数工作台

描边宽度2px1px 是细亮线，3px 以上开始抢内容渐变角度135deg长条元素上换角度，两端颜色会明显不一样起始色相14deg后两个色标自动 +90deg、+180deg圆角14px调到 20px 以上，再去试 border-image 写法的圆角失效

复制给 AI

随参数实时更新

给卡片做渐变描边（gradient border）：不要用 border-image，它不支持圆角。写成 border: 2px solid transparent，再叠两层背景——padding-box 一层实底盖住内部，border-box 一层 linear-gradient(135deg, hsl(14, 82%, 70%), hsl(104, 84%, 64%), hsl(194, 80%, 68%))，配 border-radius: 14px。再用 @property 注册一个角度变量，让描边 6s 线性无限慢慢转。

什么时候用

卡片、按钮要用品牌色勾一圈边，比纯色描边更有层次
突出「当前选中」的那一项，一圈亮边比填满整块更克制
深色背景上把元素边界画清楚，一条亮边就能顶替投影
想要随主题换色的描边，改几个 hsl 值就行

适用场景：卡片 / 按钮 / 表单

别搞混

和「border-image」的区别
border-image 是最直觉的写法，但它不认 border-radius，圆角会被切成直角，而且 border-style 不能是 none。要圆角就得用两层 background 配 padding-box / border-box，或者 ::before 加 mask。
和「外发光 box-shadow」的区别
外发光落在元素外面，边缘是糊的、没有明确边界；渐变描边是一条实线贴着边界，颜色沿线变化。
和「渐变背景」的区别
渐变背景铺满整个面，渐变描边只画那一圈线；同一个渐变值，一个当底一个当边。

容易踩的坑

border 必须设成 transparent 且有宽度，否则渐变没有地方画
只写 background-clip: border-box 会把整块底色都铺满，必须两层：padding-box 一层实底，border-box 一层渐变
长条元素上 45deg 的渐变两端颜色会不一样，因为角度按盒子尺寸算；两端想要同色就用 90deg 或 conic-gradient
用 mask-composite 的写法在 Safari 要补 -webkit-mask-composite: xor，否则会变成一整块
描边超过 2px、颜色又亮，就会盖过内容，1–2px 最稳
border-image 和 border-radius 同时写不会报错，只是圆角静默失效，很难查

无障碍降级

渐变描边是静态装饰，不需要降级；如果让它用 @property 角度动画流动，prefers-reduced-motion: reduce 下停掉动画，固定在起始角度的渐变。

关键词

background-clip: padding-box
background-clip: border-box
border: transparent
linear-gradient
conic-gradient
@property
border-image