css-border-gradient

Name: css-border-gradient
Author: boraoztunc

github.com/boraoztunc设计与 UI43498 次安装11 周前更新

代码仓库

关于 css-border-gradient

用于为界面表面添加克制渐变边框的设计技能，涵盖纯色与复杂背景的实现、Tailwind 快捷写法，以及主题、圆角和焦点状态检查。

主要功能

01渐变边框 CSS 写法
02适用于复杂背景的遮罩边框
03Tailwind 任意属性快捷写法
04透明度、圆角与配色建议
05主题和无障碍焦点检查

适用场景

01装饰 Hero 面板或功能卡片
02突出选中的套餐或活动标签
03设计悬停或焦点状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/boraoztunc/skills --skill css-border-gradient

安装后在 Claude Code 中输入/css-border-gradient确认已加载。

详细介绍

渐变边框

适用场景

表面需要比纯色 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);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

mask 和 -webkit-mask 都必须使用。mask-composite: exclude 需要在无前缀属性中声明蒙版图层，才能进行合成——如果只提供 -webkit-mask，符合规范的引擎就完全不会应用蒙版，因此 ::before 会渲染为覆盖整个表面的实心矩形。这两个合成关键字也不能互换：WebKit 的旧版属性使用 xor，标准属性使用 exclude。

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 不会造成双重边框。
圆角与表面完全一致。
渐变在正常缩放下清晰可见，但快速浏览时几乎不引人注意。
聚焦状态仍符合无障碍要求，不能只依赖渐变。

支持 Markdown

登录后评论