css-border-gradient

Name: css-border-gradient
Author: mengto

github.com/mengto设计与 UI7.1k1.6k 次安装3 天前更新

代码仓库

关于 css-border-gradient

用于为卡片、模态框和定价面板等界面添加渐变边框的 CSS 设计技能，介绍基础与遮罩写法、Tailwind 快捷方式，并强调克制与无障碍检查。

主要功能

01纯色填充渐变边框写法
02复杂背景的遮罩边框
03Tailwind 任意属性快捷写法
04主题与焦点状态检查

适用场景

01强调主要功能卡片
02框出活动标签或已选方案
03设计深色模态框或主视觉面板

安装

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

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

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

demo/

index.html

PROMPT.md

source.json

详细介绍

边框渐变

适用场景

表面需要比纯色 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>

设计原则

一次只应用于一个层级：主卡片、激活标签页、选中方案或主视觉面板。
默认不要使用彩虹边框、全饱和霓虹色或动画渐变。
边框应比内容更低调。它应起到衬托作用，而非喧宾夺主。
搭配克制的纵深效果：柔和阴影或内侧高光就足够了。
分别检查浅色和深色主题；相同的透明度值很少能同时适用于两者。

快速检查

现有的 border-color 不会造成双重边框。
圆角与表面完全匹配。
在正常缩放下能看到渐变，但浏览时几乎不会察觉。
焦点状态仍然易于访问，且不能只依赖渐变。

支持 Markdown

登录后评论