CSS边框渐变生成器
实时生成CSS渐变边框代码。
135°
0%
100%
预览
CSS代码
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}什么是CSS边框渐变？
CSS的border-color只支持纯色，要实现渐变边框需要使用background-clip技巧——将两个背景分别裁剪到padding-box和border-box来实现。
渐变类型
线性渐变（Linear）
颜色按指定角度沿直线过渡。适合从上到下、对角线等有方向感的边框效果。
圆锥渐变（Conic）
颜色围绕中心点旋转过渡。应用于边框时，可以创建彩虹般环绕整个元素的效果。
使用方法
选择渐变类型（Linear或Conic），设置角度和色标，调整边框宽度和圆角，然后复制生成的CSS代码。
常见问题
可以直接在border-color上应用渐变吗？
不可以。CSS的border-color只支持纯色。本工具使用background-clip技巧，无需JavaScript即可实现渐变边框。
linear和conic渐变边框有什么区别？
linear在一个方向（如从上到下）过渡颜色。conic围绕元素循环颜色，使边框的所有部分都能均匀显示各种颜色。
所有浏览器都支持吗？
background-clip方式支持Chrome、Firefox、Safari、Edge最新版。不支持Internet Explorer。
如何在Tailwind CSS中使用渐变边框？
Tailwind默认不支持渐变边框。可将生成的CSS添加到@layer utilities或作为内联样式使用。
什么是conic渐变边框？
将圆锥渐变应用于边框，可实现彩虹或旋转效果。
如何制作动画渐变边框？
使用@keyframes和CSS变量对conic-gradient的角度进行动画处理，可以创建旋转的渐变边框效果。