BACKGROUND & DECOR
点阵背景Dot Grid Pattern
比网格线更柔和的点阵，radius 1-2px 的圆点按 16-24px 间距铺开。
效果预览
白卡片浮在点阵上
适合用在哪
作品集、SaaS 官网功能区、Notion 风格页面。
容易踩的坑
- 圆点直径超过 2px 或间距小于 12px，点阵会变成灰雾，降低正文对比度。
- 点阵铺在卡片内部而不是卡片下方，内容区会被点纹干扰阅读。
- 缩放到 90% 或 110% 时圆点会出现摩尔纹，需在多个缩放比例下检查。
设计提示词 · Prompt
点阵背景（Dot Grid）：background-image:radial-gradient(圆点色 1-1.5px, transparent 1-1.5px)、background-size:16-24px 正方形、底色近白。圆点颜色用文字色的 10-15% 透明度（#D5D6DF 级别），太深会抢内容。与内容组合：白底卡片浮在点阵上（卡片加投影），或点阵局部做径向淡出。变体：点阵 + 连线（神经网络感）、点阵近大远小的透视版。比网格更"轻"，适合内容密集的页面。
Dot Grid: background-image: radial-gradient(dot color 1-1.5px, transparent 1-1.5px), background-size: 16-24px squares, near-white base. Make the dot color 10-15% of the text color's opacity (around #D5D6DF); too dark and it competes with content. Combining with content: white cards floating on the dot grid (with card shadows), or a local radial fade-out on the dots. Variants: dots + connecting lines (neural-network feel), or a perspective version where dots are larger near and smaller far. Lighter than a line grid, suited to content-dense pages.
常见搭配
同一页面里经常和「点阵背景」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-dotbg"> <b>白卡片浮在点阵上</b> </div>