使用Tailwind CSS创建动态渐变边框

Preview of the card with the animated gradient border

Animated border gradients have become a popular design trend, particularly on SaaS and startup landing pages. Inspired by this trend, we decided to create our own version using Tailwind CSS.

动画边框渐变已成为一种流行的设计趋势，尤其在SaaS和创业公司的登陆页面上。受到这一趋势的启发，我们决定使用Tailwind CSS创建我们自己的版本。

We made a card highlighted with this particular visual effect using only CSS. By leveraging Tailwind’s arbitrary properties we created a complex gradient, consisting of:

我们使用纯CSS制作了一张带有特殊视觉效果的卡片。通过利用Tailwind的任意属性，我们创建了一个复杂的渐变效果，包括：

A linear gradient with three stop-colors for the background
三个停止颜色的线性渐变用于背景
A conic gradient with five stop-colors for the borders
五个停止颜色的锥形渐变用于边框

Then, we added a CSS @property rule to control the angle of the conic gradient. This allowed us to animate the gradient with a new animation defined in the tailwind.config.js file.

然后，我们添加了一个CSS的@property规则来控制锥形渐变的角度。这使我们能够使用在tailwind.config.js文件中定义的新动画来实现渐变效果。

Note: this animation is currently only supported in Chrome and Chromium-based browsers. Firefox does not yet support the CSS @property rule, but it is expected to be integrated soon, as it is already available in the nightly development version.

注意：此动画目前仅在Chrome和基于Chromium的浏览器中支持。Firefox尚未支持CSS的@property规则，但预计将很快集成，因为它已经在夜间开发版本中可用。

Code

代码

<div class="w-full max-w-[422px] [background:linear-gradient(45deg,#172033,theme(colors.slate.800)_50%,#172033)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.600/.48)_80%,_theme(colors.indigo.500)_86%,_theme(colors.indigo.300)_90%,_theme(colors.indigo.500)_94%,_theme(colors.slate.600/.48))_border-box] rounded-2xl border border-transparent animate-border"> <div class="p-5"> <div class="flex justify-between items-center"> <div> <div class="flex space-x-2 items-center mb-0.5"> <div class="text-2xl font-bold text-slate-200 mb-1">17,479</div> <div class="text-xs font-medium text-emerald-500">+48%</div> </div> <div class="text-sm font-medium text-slate-500">Monthly visits</div> </div> <button class="w-8 h-8 flex justify-center items-ce...