用 radial-gradient + background-size 可实现清晰点状背景，关键在于固定像素半径与间隔、锚定起点、双层错位控制波点；retina 屏需偶数像素避亚像素模糊。
直接用 radial-gradient + background-size 就能做出清晰、可控的点状背景，不需要 SVG 或 Canvas；但错用参数会导致点糊、错位或 Retina 屏发虚。
radial-gradient 单层点阵的基本写法
核心是定义一个「实心圆点 + 透明间隙」的渐变单元，再靠 background-size 控制重复密度。常见错误是把半径写成百分比或不设固定像素间隔。
-
radial-gradient(circle, #000 1px, transparent 1px)：1px 黑点 + 紧挨着的 1px 透明区，构成最小周期 -
background-size: 12px 12px：必须是固定像素值（如12px），不能用1em或5%，否则缩放时点会拉伸或错格 - 点的实际大小 = 渐变中第一个颜色停止位置（如
1px），间距 =background-size值 - 如果点太淡或看不见，检查是否漏写了
transparent后的终止位置（如写成transparent而非transparent 2px）
解决 Retina 屏模糊和 0.5px 错位问题
在 dpr > 1 的设备上，1px 线常被渲染为亚像素，导致点边缘发虚甚至消失。这不是 CSS 写错了，而是浏览器渲染机制问题。
- 强制对齐起点：
background-origin: border-box和background-clip: border-box，防止从 content-box 偏移 - 绕过亚像素：把点宽和间隔都设为偶数像素，例如
radial-gradient(circle, #000 2px, transparent 2px)配background-size: 20px 20px - 调试技巧：临时加
background-color: rgba(255,0,0,0.05)，看底色是否被完全覆盖——有漏色说明点阵没填满 - 避免用
repeating-radial-gradient，它默认平铺起点不可控，比手动叠加radial-gradient更难对齐
做错位波点（双层 radial-gradient）
要实现类似波点裙那种交错感，不是靠旋转或 transform，而是叠加两层相同点阵，用 background-position 错开半个周期。
- 写法示例：
background-image: radial-gradient(...), radial-gradient(...) - 对应设置：
background-size: 30px 30px，background-position: 0 0, 15px 15px（即 half of size） - 注意两层渐变参数必须完全一致，否则错位后会出现重影或空洞
- 如果底层有深色背景，建议点颜色用
rgba(0,0,0,0.15)而非纯黑，避免过重压住内容
在 Vue/Vuetify 组件里适配图像边框点阵
Vuetify 的 v-card 或图片容器自带 padding/margin，直接套点背景容易被裁切或偏移，尤其当图片用 object-fit 时。
- 不要把点阵写在图片元素上，而是套一层伪元素或绝对定位的遮罩层（如
::before） - 给容器设
position: relative，点阵层设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 若点阵只围图像四角（如题中
.top-left），确保该元素的background-origin和background-size与父容器视觉节奏一致，别用10px配200px图像边距 - Vuetify 5 默认启用 CSS 变量主题，慎用
!important覆盖background，优先用 scoped style 或:deep()精准穿透
真正难的不是写出第一行 radial-gradient，而是让点在不同 DPR、不同缩放、不同容器尺寸下都稳定对齐——这取决于你是否锁死了 background-size 的单位、是否锚定了起点、以及是否验证了多层叠加时的 position 关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
