CSS 棋盘格背景… 但带有圆角和悬停样式

一方面，使用 CSS 创建简单的棋盘格背景很容易。另一方面，除非我们是 CSS 渐变忍者，否则我们基本上只能使用基本图案。

至少在我盯着屏幕上的棋盘格背景并试图稍微圆化方块的角时，我是这么想的……直到我想起了我最喜欢的项目符号字符 — ✦ — 并意识到如果我能在图案的每个交叉点上放置它，我肯定就能得到我想要的设计。

事实证明这是可能的！这是证据。

让我们从基本图案开始

<div></div>

div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

这为我们提供了一个从粉红色到蓝色的正方形重复背景，它们之间有 5px 的白色间隙。每个正方形宽五十像素且透明。这是使用 repeating-linear-gradient 创建的，它会创建一个线性渐变图像，其中渐变在整个包含区域中重复。

换句话说，该序列中的第一个渐变创建了白色的水平条纹，第二个渐变创建了白色的垂直条纹。它们叠加在一起形成了棋盘格图案，第三个渐变填充了其余空间。

现在，我们将前面提到的星形字符添加到背景图案的顶部。我们可以通过将其与渐变一起包含在同一个 background 属性中，同时使用编码的 SVG 来表示形状。

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
      <foreignObject width='35px' height='35px'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
      </foreignObject>
    </svg>"
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

让我们分解一下。第一个关键字 repeat 表示这是一个重复的背景图像。其后分别是每个重复单元的位置和大小（left -17px top -22px/55px 55px）。此偏移位置基于字符和图案的大小。您将在下面看到字符大小是如何给定的。添加偏移是为了将重复的字符重新定位到棋盘格图案的每个交叉点上。

SVG 中有一个包含字符的 HTML <div>。请注意，我在其中声明了一个 font-size。这最终决定了棋盘格图案中正方形的圆角半径 — 字符越大，正方形越圆。从数据 URL 展开的 SVG 如下所示

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
  <foreignObject width='35px' height='35px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
  </foreignObject>
</svg>

现在 CSS 图案已建立，让我们添加一个 :hover 效果，在该效果中，字符将被移除，而白线将使用带有 alpha 透明度的 rgb() 颜色值变得稍微半透明。

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

就是这样！现在，我们不仅拥有了圆角，而且对图案有了更多控制，可以实现类似这样的效果

再说一遍，整个练习是为了获得一个棋盘格图案的正方形网格，该网格支持圆角、用作图案叠加层的背景渐变以及交互式样式。我认为这很好地完成了任务，但我也很想知道您可能会如何处理它。请在评论中告诉我！