css-border-gradient

name	css-border-gradient
description	为高级网页面板应用微妙的渐变边框处理。当卡片、定价面板、导航栏、模态框、按钮或主视觉面板需要精致的边缘高光、又不要喧闹辉光时使用。

Border Gradients

何时使用

• 面板需要比扁平 border 更高级的边缘。
• 深色玻璃、定价、主视觉、模态框或特性卡片 UI 显得太平淡。
• 悬停或焦点态需要一抹安静的品牌强调色。

默认值

• 宽度：1px；仅大型主视觉卡片或激活态用 2px。
• 圆角：继承父级圆角。
• 角度：135deg 或 160deg。
• 停止点：中性高光、一处品牌强调色、中性淡出。
• 不透明度：让大多数停止点低于 0.4；微妙胜过闪亮。

简单 CSS 模式

当面板有实心或半透明填充时使用。

.gradient-border {
  --surface: rgba(10, 14, 24, 0.72);
  --border-a: rgba(255, 255, 255, 0.34);
  --border-b: rgba(125, 92, 255, 0.36);
  --border-c: rgba(255, 255, 255, 0.08);

  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--border-a), var(--border-b), var(--border-c)) border-box;
}

<div class="gradient-border">
  ...
</div>

遮罩模式

当面板已有不应被覆盖的复杂背景时使用。

.gradient-border-mask {
  position: relative;
  border-radius: 20px;
}

.gradient-border-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.34),
    rgba(125, 92, 255, 0.36) 45%,
    rgba(255, 255, 255, 0.08)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

Tailwind 快捷方式

对一次性面板使用任意属性。

<div class="rounded-2xl border border-transparent [background:linear-gradient(rgba(10,14,24,.72),rgba(10,14,24,.72))_padding-box,linear-gradient(135deg,rgba(255,255,255,.34),rgba(125,92,255,.36),rgba(255,255,255,.08))_border-box]">
  ...
</div>

审美准则

• 一次只应用于一个层级：主卡片、激活的标签页、选中的方案或主视觉面板。
• 默认不要使用彩虹边框、全饱和霓虹或动画渐变。
• 让边框比内容更安静。它应起框衬作用，而非与内容相争。
• 搭配克制的纵深：一层柔和阴影或内部高光足矣。
• 分别检查浅色和深色主题；同一 alpha 很少能同时适用于两者。

快速检查

• 不因已有的 border-color 而产生双重边框。
• 圆角与面板完全匹配。
• 渐变在正常缩放下可见，但快速浏览时几乎察觉不到。
• 焦点态仍保持无障碍，且不只依赖渐变。