最直接实现点状背景的方法是用 radial-gradient 配合 background-size：background-image: radial-gradient(#999, #999) 设实心点，background-size 控制间距（如 8px），需分层设置 background-color（底色）与 background-image（点图），避免颜色重叠隐形，推荐用 rem 或 clamp() 响应式适配。
用 CSS 的 background-image 画点状背景最直接
点状背景本质是重复的小圆点图案，不用图片也能实现，靠的是 radial-gradient 配合 background-size 控制间距和大小。关键不是“画一个点”，而是“让一个点无限平铺”。
常见错误是只写一次渐变却没设好尺寸，结果整个按钮被一个大圆占满；或者用 background-color 想“叠加点”，根本不起作用。
-
background-image: radial-gradient(#999, #999)—— 圆心色和边缘色相同，才能出实心点 -
background-size: 10px 10px—— 数值越小点越密，建议 6–12px 之间 -
background-position: 0 0（默认即可）—— 确保起点对齐，避免错位缝隙 - 必须搭配
background-repeat: repeat（默认就是 repeat，可省略）
按钮上叠加点状背景时，background-color 和 background-image 要分层写
很多人把点当“颜色”直接覆盖掉底色，结果点没了——因为 background-image 默认透明，得留出底色空间。正确做法是把纯色放底层，点图放上层：
button {
background-color: #f0f0f0;
background-image: radial-gradient(#ccc, #ccc);
background-size: 8px 8px;
}如果想换主色调，只改 background-color 就行；点的颜色单独控制 radial-gradient 里的色值。别把两个颜色写成一样，否则点就隐形了。
立即学习“前端免费学习笔记（深入）”；
点太糊？检查是否用了模糊半径或缩放失真
点发虚、边缘晕开，大概率是用了 radial-gradient(circle at 50% 50%, #000, transparent 50%) 这类带透明过渡的写法——它本意是做“柔边圆”，但点状背景要的是硬边小圆。
- 删掉
transparent和百分比半径，用radial-gradient(#333, #333)强制实心 - 避免在高 DPR 屏幕（如 Retina）上用过小的
background-size，低于 4px 容易被抗锯齿吞掉 - 不要对按钮设
transform: scale()或全局zoom，会拉伸点阵导致变形
需要响应式点密度？用 rem 或 clamp() 动态调 background-size
固定像素值在手机小屏上点会挤成一片，在大屏上又太稀疏。更稳妥的方式是绑定字体基准：
button {
background-size: 1rem 1rem; /* 1rem ≈ 16px，随根字号缩放 */
}或者用 clamp() 锚定范围：
background-size: clamp(4px, 2vmin, 8px) clamp(4px, 2vmin, 8px);
注意：所有现代浏览器都支持 radial-gradient 作为背景，但 IE 完全不支持——如果还要兼容 IE，只能切 PNG 点纹图，且需额外处理 background-size 在 IE 中的 bug。
点的位置和大小其实很敏感，差 1px 就可能从“精致纹理”变成“脏污噪点”，调的时候盯着真实设备看两眼比看代码更重要。
