棋盘背景图案

创建一个棋盘背景图案。

• 使用 background-color 设置白色背景。
• 使用 background-image 和两个 linear-gradient() 值。给每个值设置不同的角度以创建棋盘图案。
• 使用 background-size 指定图案的大小。

[!NOTE]

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

<div class="checkerboard"></div>

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}