A clean, gently drifting polka dot pattern. Lightweight and perfect for modern UI.
这是一个背景组件，使用 CSS 的“radial-gradient”来绘制轻量且干净的圆点图案。它不使用任何图像，因此加载速度快并且完全可定制。
:global(.dark) 类和媒体查询无缝切换背景颜色和点颜色。您只需更改 CSS 变量即可轻松调整点的大小和间距。
--dot-size：点半径（例如，2px 会使其变大）--dot-space：点之间的空间（例如32px会降低密度）--dot-color-light / --dot-color-dark：更改点颜色。我们建议选择与您的主题颜色相匹配的浅色。export const PolkaDotBackground: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
<div className="polka-container relative w-full min-h-[400px] flex items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-950">
{/* Polka Dot Pattern */}
<div className="polka-dots absolute inset-0"></div>
{/* Vignette Overlay */}
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(248,250,252,0.85)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.85)_100%)]"></div>
{/* Content */}
<div className="relative z-10">
{children}
</div>
</div>
);
};完全支持所有现代浏览器（Chrome、Firefox、Safari、Edge）。由于它是使用 GPU 加速的“变换”进行动画处理的，因此即使在滚动或执行其他繁重处理时也能非常流畅地工作。