渐变边框生成器（CSS）

渐变边框生成器（CSS）: 用途

显而易见的渐变边框做法 border-image 会忽略圆角。本生成器使用两层背景（padding-box 和 border-box）的技巧，保留 border-radius；当卡片需要透明背景时，则使用带 mask-composite 的蒙版。

选择两到三种颜色、角度、粗细和圆角，还可选择旋转边框，它由 conic-gradient 和用 @property 注册的角度变量实现，对要求减少动态效果的用户会关闭。

使用方法

1. 选择颜色和角度。
2. 调整粗细、圆角和背景。
3. 复制 CSS 并应用该类。

使用场景

• 突出显示的套餐卡片。
• 带彩色边框的头像。
• 主要行动按钮。

常见问题

为什么不用 border-image？

用 border-image 时渐变可以生效，但圆角（border-radius）会被忽略。本生成器的技巧是把渐变画成第二层背景，只在边框区域显示，这样圆角就保留了。

卡片背景透明怎么办？

勾选透明背景选项：代码会改用蒙版（mask）镂空中间，卡片后面的内容会从边框内侧透出来。

旋转边框是怎么实现的？

渐变是圆锥渐变，角度是用 @property 注册的变量，CSS 可以对它做动画。对于要求减少动态效果的用户，动画会关闭。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具