圆点背景图案

创建一个圆点背景图案。

• 使用 background-color 设置黑色背景。
• 使用 background-image 和两个 radial-gradient() 值创建两个圆点。
• 使用 background-size 指定图案的大小。使用 background-position 适当地放置两个渐变。

[!NOTE]

元素的固定 height 和 width 仅用于演示目的。

<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;
}