企业官网建设流程全解析

• 前端

导读

polka-dot-pattern（波卡圆点背景图案）是 30-seconds-of-css 仓库中一个经典的视觉类（visual）CSS 代码片段，仅用background-color与两个radial-gradient()渐变即可在任意元素上铺满整齐的圆点纹理。读完本文，你将掌握如何用纯 CSS（不借助任何图片资源）生成可平铺的波卡圆点背景，并理解radial-gradient、background-size、background-position与background-repeat之间的配合关系，从而自由调整圆点颜色、大小与间距。

片段源码：两行渐变画出一个圆点矩阵

原片段存放于 snippets/polka-dot-pattern.md，核心思路极其简洁：

• 用background-color设置黑色底色；
• 用background-image叠加两个radial-gradient()，各自画出一个白色圆点；
• 用background-size指定图案单元尺寸，用background-position将两个圆点错位摆放，形成整齐的菱形网格；
• 固定width/height仅为演示用，实际使用时可去掉。

对应的 HTML 与 CSS 完整代码如下：

<div class="polka-dot"></div>

.polka-dot { width: 240px; height: 240px; background-color: #000; background-image: radial-gradient(#fff 10%, transparent 11%), radial-gradient(#fff 10%, transparent 11%); background-size: 60px 60px; background-position: 0 0, 30px 30px; background-repeat: repeat; }

把这段代码放入页面后，即可看到一个 240px × 240px 的黑色方块上均匀分布着白色圆点——这就是波卡圆点图案的全部秘密。

原理拆解：四个关键属性如何协同

1.radial-gradient()：渐变即"点"

radial-gradient(#fff 10%, transparent 11%)定义了一个以中心为圆心、从白色到透明渐变的径向渐变。关键在于两个色标（color stop）：

• 在半径10%处之前是纯白色#fff；
• 在半径11%处立刻过渡为完全透明transparent。

两个色标之间只有 1% 的差值，使渐变在到达圆点边缘时几乎瞬间"硬切"为透明，视觉上就呈现为一个边界清晰的实心圆点，而非模糊的光晕。这是本片段最核心的技巧：用极小间隔的色标把渐变"截断"成圆形图案。

2.background-size: 60px 60px：定义平铺单元的"画布"

background-size把每个渐变背景限制在 60px × 60px 的区域内。两个radial-gradient各自拥有独立的 60px × 60px 平铺单元，单元内的圆点半径约为 60px × 10% = 6px。因此background-size直接决定圆点的间距：单元越大，圆点越疏。

3.background-position: 0 0, 30px 30px：错位叠加出菱形网格

这是整个图案的关键一步。两个渐变背景层的定位分别为：

• 第一层：0 0（左上角对齐）；
• 第二层：30px 30px（向右下各偏移 30px，恰好是单元边长的一半）。

由于每个单元内有一个位于中心的圆点，两层各在对应单元的中央各画一个点，叠加后便形成了"每行交错半个间距"的菱形排列——这正是波卡圆点图案区别于普通网格图案的标志性特征。该片段也是仓库中少数同时用到background-position与多背景叠加的示例（类似的还有 snippets/zig-zag-pattern.md）。

4.background-repeat: repeat：让图案无缝铺满

最后用background-repeat: repeat让 60px × 60px 的渐变单元在水平、垂直两个方向无限平铺。结合背景层在默认位置的重叠，任意大小的元素都会被圆点完整覆盖，无需关心元素实际尺寸。

从源码看同类做法：渐变图案家族

波卡圆点并非仓库中唯一的渐变背景图案，30-seconds-of-css的 snippets 目录里还有一组"亲戚"可供对比学习：

• snippets/checkerboard-pattern.md：棋盘格，用两个不同角度的linear-gradient()叠加而成；
• snippets/stripes-pattern.md：条纹，用单个linear-gradient(90deg, transparent 50%, #000 50%)实现，同样是"色标硬切"的思路；
• snippets/zig-zag-pattern.md：锯齿纹，用四个linear-gradient()加background-position错位摆放。

它们与波卡圆点共享同一套方法论：用极小间隔的色标构造几何单元，再通过background-size定义单元尺寸、background-position控制单元内部图案的位置。掌握了这套方法，你就能自行"拼装"出任意重复纹理。

此外，如果希望圆点跟随鼠标移动形成动态效果，可参考 snippets/mouse-cursor-gradient-tracking.md——它使用radial-gradient(circle closest-side, pink, transparent)结合 CSS 变量--x/--y实现渐变随光标追踪，展示了radial-gradient在交互场景下的另一种用法。

实战变形：调色、调距、调大小

原片段只演示了"黑底白点"这一种组合，实际使用时几乎每个数值都可独立调整：

例如，制作一个"米色底、棕红点"的复古风装饰背景：

.polka-dot { background-color: #f5f0e6; background-image: radial-gradient(#8b5e3c 12%, transparent 13%), radial-gradient(#8b5e3c 12%, transparent 13%); background-size: 80px 80px; background-position: 0 0, 40px 40px; background-repeat: repeat; }

使用注意事项

• 片段中的width: 240px; height: 240px仅为演示，将.polka-dot用在按钮、卡片、页面根元素等实际场景时，直接删除这两行即可，背景会自动随元素尺寸铺满；
• 由于图案完全由 CSS 生成，不产生任何网络图片请求，非常适合作为加载占位、装饰性纹理或需要跟随主题色变化的动态皮肤；
• 两个radial-gradient需要保持相同参数、仅靠background-position错位，否则网格会失去对称性；
• 若需要更密集或更稀疏的圆点，优先调整background-size；若只改大小而不想改变间距，则同时调整色标百分比。

小结

波卡圆点背景是30-seconds-of-css中"纯 CSS 重复纹理"类片段的代表作：两个radial-gradient画出圆点，background-size控制间距，background-position以半单元偏移制造菱形网格，background-repeat完成无缝平铺。理解这四个属性的协同关系后，你不仅能直接复用该片段，还能像仓库中棋盘格、条纹、锯齿纹一样，自由创作属于自己的 CSS 纹理。

• 前端