MOTION EFFECT
流光描边Shine Border
整圈彩虹渐变缓慢自转的描边，比 Border Beam 更「厚」更饱满，是 Magic UI 的 shimmer 系命名之一。
效果预览
Shine Border流光描边
适合用在哪
AI 产品定价卡、会员权益卡、需要突出「高级感」的容器。建议一页只出现一两次。
容易踩的坑
- 彩虹色带转速快于 4s 一圈会显得廉价，像游戏广告而非高级感。
- 多色描边和卡片内的品牌色、按钮色冲突，内容层级被边框压过。
- 外层 padding 只有 2px，圆角不同步会在四角露出锯齿缝隙。
设计提示词 · Prompt
流光描边（Shine Border）：外层容器 padding:2px，背景为 conic-gradient 多色带（如 amber→pink→violet→cyan 回到 amber），整体 rotate 360deg 线性 4s 无限循环；内层 inset 2px 的同圆角白底填充，承载内容。圆角保持 12-16px，宽度控制在 300px 以内避免转速看起来太快。暗色场景可把内层换成近黑底色并加 inner shadow。
Shine Border: the outer container has padding:2px and a background of a multi-color conic-gradient band (e.g. amber→pink→violet→cyan back to amber), rotating 360deg linearly over 4s, infinite. An inner white fill at inset 2px with the same border radius holds the content. Keep the border radius at 12-16px and the width within 300px so the rotation does not look too fast. In dark contexts, swap the inner fill for a near-black background and add an inner shadow.
常见搭配
同一页面里经常和「流光描边」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-shine">
<div class="m-shine__in"><b>Shine Border</b><span>流光描边</span></div>
</div>
</div>