CARD
渐变描边卡片Gradient Border Card
卡片外圈是一道 1.5-2px 的渐变细线，内部纯白——只描一圈边就足够特别。
效果预览
Pro 会员已解锁
无限导出、优先渲染队列与专属支持通道。
适合用在哪
高级功能入口、被推荐的项目、要强调的关键卡片。
容易踩的坑
- 内层圆角没有比外层减去描边宽度，四角出现渐变色漏边或白缝。
- 一屏里超过两张卡用渐变描边，强调效果互相抵消。
- 暗色模式下内层仍是纯白底，卡片像一块白板贴在深色页面上。
设计提示词 · Prompt
渐变描边卡片（Gradient Border Card）：用双层结构实现——外层 padding:1.5-2px、border-radius:16px、background:linear-gradient(135deg,色A,色B 50%,色C)、带一层同色系大范围柔光投影；内层 border-radius 继承减 2px、纯白底。渐变色取品牌色的 3 个邻近色相（如靛蓝→品红→青）。这个技巧比 border-image 兼容性好得多；要更炫可换成 conic-gradient + @property 让渐变旋转。
Gradient Border Card: implement with a two-layer structure — the outer layer has padding:1.5-2px, border-radius:16px, background:linear-gradient(135deg, color A, color B 50%, color C), and a large soft glow shadow in the same color family; the inner layer inherits the border-radius minus 2px, with a pure white background. Pick 3 neighboring hues of the brand color for the gradient (e.g. indigo→magenta→cyan). This technique has far better compatibility than border-image; for something flashier, switch to conic-gradient + @property to make the gradient rotate.
常见搭配
同一页面里经常和「渐变描边卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-gbc">
<div class="d-gbc__in">
<b>Pro 会员已解锁</b>
<span>无限导出、优先渲染队列与专属支持通道。</span>
</div>
</div>