仅桌面端保证样式
BorderBeam 边框流光
装饰性流光边框：conic-gradient 光带沿边框旋转，纯 CSS 动画零 JS 开销。用于告警卡片、重点提示、大屏聚焦等场景；@media (prefers-reduced-motion) 下自动退化为静态光带。
基础用法
active 控制流光开关，光带颜色默认取主题色：
重点工单
SLA 剩余 15 分钟，即将超时
已停用流光
active=false 只留淡边
自定义颜色与速度
color / color-to 定义光带起止色，duration 控制一圈秒数：
告警（红橙 3s）
运行中（绿色 8s）
大屏氛围（紫青 5s）
光带粗细与内边距
size 控制光带厚度，padding 让流光框与内容留出间隙：
年度总结报告
size=4 / padding=12 / 加背景底
BorderBeam API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| active | Boolean | true | 流光开关；关闭时保留一圈淡边占位 |
| color | String | 主题色 | 光带起始色 |
| color-to | String | color 的透明渐隐 | 光带结束色 |
| size | Number | 2 | 光带厚度（px） |
| radius | Number | 8 | 圆角（px），建议与卡片圆角一致 |
| duration | Number | 6 | 一圈时长（秒） |
| delay | Number | 0 | 动画延迟（秒） |
| padding | Number | 0 | 内容与流光框的内边距（px） |
| background | String | 'transparent' | 组件背景 |
Slots
| 名称 | 说明 |
|---|---|
| default | 卡片内容 |
实现说明
流光通过 CSS @property 注册 --eb-bb-angle 角度变量并驱动 conic-gradient 旋转，配合 mask-composite: exclude 挖空中心只留边框带。依赖 Chrome 85+ / Electron，低版本浏览器中动画静止但边框正常显示。