用途:当界面表面需要比纯色边框更高级的边缘效果时使用,例如深色玻璃拟态、定价面板、主视觉、弹窗或功能卡片显得过于平淡,或悬停、聚焦状态需要低调的品牌点缀。
默认参数:宽度 1px,仅大型主视觉卡片或激活状态用 2px;圆角继承父级;角度 135deg 或 160deg;色标为中性高光、一个品牌强调色、中性渐隐;多数色标透明度保持在 0.4 以下,追求含蓄而非闪亮。
主要能力与用法:提供两种 CSS 模式。简单模式适用于有纯色或半透明填充的表面,通过 padding-box 与 border-box 双层背景实现,示例类名为 .gradient-border,使用 border: 1px solid transparent 与 linear-gradient 组合。遮罩模式适用于已有复杂背景、不应被覆盖的表面,通过 ::before 伪元素配合 mask 与 mask-composite: exclude 实现,示例类名为 .gradient-border-mask。另提供 Tailwind 任意属性写法,用于一次性表面。
审美规则:一次只应用于一个层级,如主卡片、激活标签、已选方案或主视觉面板;默认不使用彩虹边框、全饱和霓虹或动画渐变;边框应比内容更安静,起框定作用而非争夺注意力;搭配克制的层次感,柔和阴影或内高光即可;浅色与深色主题需分别检查,同一透明度通常不通用。
快速检查:避免与已有 border-color 形成双边框;圆角与表面完全一致;渐变在正常缩放下可见,但扫视时几乎不被注意;聚焦状态保持可访问,不能只依赖渐变。
限制:资料未提供安装命令、依赖、浏览器兼容性说明、收费或价格信息,也未提供完整组件库或框架集成方式。