ShineBorder
shine-border流光边框 · 渐变 mask 只留边框区 + chart token + RSC
用法
基础用法
ShineBorder 是 absolute inset-0 流光边框层，放进 relative + rounded 容器内即得整条边框的流动微光。默认 chart 三色渐变。
Shine Border
tsx
<div className="relative h-40 w-72 overflow-hidden rounded-xl bg-surface">
<div className="grid h-full place-items-center text-sm text-muted">Shine Border</div>
<ShineBorder />
</div>单色 · 粗边
shineColor 传单个 CSS 颜色/token 即单色流光；borderWidth 调边框粗细。
Single
tsx
<ShineBorder borderWidth={2} shineColor="var(--color-primary)" />多色 · 调速
shineColor 传颜色数组组成多段渐变；duration 控制流光一轮的秒数（越大越慢）。
Multi · Fast
tsx
<ShineBorder
shineColor={["var(--color-chart-2)", "var(--color-chart-4)", "var(--color-chart-1)"]}
duration={8}
/>何时用
想让卡片/容器的整条边框持续流动渐变流光时用（纯 CSS、可在 RSC 服务端渲染）。它是绝对定位覆盖件，放进 relative 容器即可。要一个光点绕边而非整边流光用 BorderBeam；要 hover 时斜向扫一道反光用 GlareHover。
导入
ts
import { ShineBorder } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| borderWidth | number | 1 | 边框宽度 px |
| duration | number | 14 | 流光一轮秒数 |
| shineColor | string | string[] | 瑚琏 chart token | 流光色，单色或多色数组 |
| className | string | — | 透传 className |
| style | CSSProperties | — | 透传内联样式 |
禁忌 / 坑
- 必须置于
position:relative容器内，否则边框定位错乱。 shineColor喂 token 需带--color-前缀，裸var(--primary)不解析——参见 [[hulian-token-color-var-needs-color-prefix]]。- 纯 CSS 实现，可在 RSC 直接用，无需
"use client"。
相关
BorderBeam · GlareHover · Lens · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
Shine Border
<div className="relative">
...content
<ShineBorder borderWidth={1} duration={14} />
</div>