最新
渐变Mesh Gradient Background
Three blurred radial pools over an opaque base - a mesh section that never has to fight its own text for contrast.
#gradient#mesh#background
6 个框架初级
Loading…
A card with a 1px gradient border via the padding trick - because border-image cannot round corners.
<!--
CSS borders cannot take a gradient and keep their corner radius
(border-image discards border-radius), so the "border" here is the 1px of
gradient background the p-px padding leaves exposed around an opaque inner
card. Two consequences: the inner surface must be fully opaque or the
gradient shows *through* the card instead of around it, and the inner radius
must be the outer radius minus the ring width or the corners pinch.
-->
<div class="w-full max-w-sm rounded-2xl bg-gradient-to-br from-blue-500 via-violet-500 to-fuchsia-500 p-px">
<div class="rounded-[calc(1rem_-_1px)] bg-white p-6 dark:bg-gray-950">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Pro plan</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Everything in Free, plus unlimited projects and priority support.
</p>
<a
href="#"
class="mt-5 inline-flex w-full items-center justify-center rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950"
>
Upgrade
</a>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
copy | string | - | 显示在标题下方的正文文本。 |
ctaLabel | string | 'Upgrade' | 行动号召按钮的文案。 |
ctaHref | string | '#' | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
CSS borders cannot take a gradient and keep their radius (`border-image` discards `border-radius`), so the "border" is the 1px of gradient background the `p-px` padding leaves exposed around an opaque inner card. Two rules keep the illusion: the inner surface must be fully opaque - any alpha and the gradient shows through the card, not just around it, which is also why the inner card re-declares `bg-white dark:bg-gray-950` rather than inheriting - and the inner radius must be the outer radius minus the ring width (`calc(1rem - 1px)`) or the corners pinch. Recolour the ring on the wrapper’s `from/via/to` classes; mid-500 stops read well against both themes. Widen the ring with `p-0.5` and update the `calc()` to match. The card is static by design - pair it with the conic-ring entry if you want the border to move.