---
url: /components/border-beam.md
---
# BorderBeam 边框流光

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

## 基础用法

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

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | 光带宽度（px） | number | `2` |
| duration | 一圈时长（ms，越小越快） | number | `6000` |
| delay | 起始延迟（ms） | number | `0` |
| color-from | 流光渐变起点色 | string | `transparent` |
| color-to | 流光渐变主色 | string | `var(--ev-color-primary)` |
| reverse | 反向扫动 | boolean | `false` |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| default | 被包裹的内容 |