项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。开发迭代中,请勿用于生产环境。
Skip to content
仅桌面端保证样式

BorderBeam 边框流光 ​

EvBorderBeam 包住任意内容,一道主色流光沿边框循环扫过,为关键卡片制造「正在发生」的注意力焦点。 自带 1px 静态细描边(--ev-border-color-light),流光未扫过时卡片仍有边界。 基于 CSS @property 角度插值实现,不支持的浏览器自动退化为静态渐变细环。

基础用法 ​

包住一张卡片
圆角写在 EvBorderBeam 上(ring 同步取圆角),内容自带底色即可。

重点推荐

流光沿边框循环扫过,把注意力交给它。

vue
<EvBorderBeam :width="2" :duration="5000" style="border-radius: 14px">
  <EvCard flat>…</EvCard>
</EvBorderBeam>

API ​

Props ​

属性说明类型默认值
width光带宽度(px)number2
duration一圈时长(ms,越小越快)number6000
delay起始延迟(ms)number0
color-from流光渐变起点色stringtransparent
color-to流光渐变主色stringvar(--ev-color-primary)
reverse反向扫动booleanfalse

插槽 ​

插槽说明
default被包裹的内容

基于 MIT 许可证发布