MOTION EFFECT
边框光束Border Beam
一道光沿着容器描边循环跑动的边框特效。Aceternity UI / Magic UI 的招牌组件，比静态渐变边框更有「正在运行」的暗示。
效果预览
Border Beam边框光束
适合用在哪
推荐套餐卡、AI 产品卡、正在处理中的状态容器、需要强调但不适合用实色描边的卡片。
容易踩的坑
- 同屏超过 2 个光束边框会互相抢视线，强调效果反而被稀释。
- 旋转的 conic 层 inset:-70% 远大于卡片，大卡片上持续重绘会掉帧。
- 未响应 prefers-reduced-motion，光环无限转动会干扰前庭敏感用户。
设计提示词 · Prompt
边框光束（Border Beam）：容器 position:relative + overflow:hidden，::before 放一个 inset:-70% 的 conic-gradient（transparent 0→300deg，主色 330deg，高亮色 350deg，transparent 360deg），用 rotate 360deg 线性 3s 无限循环；::after 用 inset:1.5px 的同圆角白色实心板盖住中间，只露出 1.5px 的光环；内容用相对定位 z-index:2 压在最上层。可选再叠一层同色 drop-shadow 做外发光。
Border Beam: the container is position:relative + overflow:hidden. A ::before with inset:-70% holds a conic-gradient (transparent 0→300deg, primary color at 330deg, highlight color at 350deg, transparent at 360deg), rotating 360deg linearly over 3s, infinite. An ::after with inset:1.5px and the same border radius, filled solid white, covers the middle so only a 1.5px ring of light shows. Content uses position:relative with z-index:2 to sit on top. Optionally add a same-color drop-shadow layer for an outer glow.
常见搭配
同一页面里经常和「边框光束」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="m-beam"><span><b>Border Beam</b>边框光束</span></div> </div>