使用CSS創(chuàng)建簡單的方格背景很簡單。但是，在不訴諸復(fù)雜的CSS梯度的情況下實現(xiàn)圓角可能是具有挑戰(zhàn)性的。本文使用帶有SVG字形的巧妙技巧提出了創(chuàng)意解決方案。

最初，我努力地繞過基本方格模式的角落。然后，我想起了子彈點字形（?）的多功能性，并意識到在每個交叉路口疊加它可能會產(chǎn)生所需的圓形效果。

讓我們從基本方格模式開始：

<div></div>

 div {
  背景： 
    重復(fù)線性級別（
      右，透明， 
      透明50px， 
      白色50px， 
      白色55px
    ），
    重復(fù)線性級別（
      底部，透明，  
      透明50px， 
      白色50px， 
      白色55px
    ），
    線性畢業(yè)生（45度，粉紅色，Skyblue）；
  / *更多樣式 */
}

該代碼生成了一個正方形的重復(fù)模式，從粉紅色到Skyblue，并具有5??px白色間隙。 repeating-linear-gradient函數(shù)會產(chǎn)生水平和垂直白色條紋，在分層時，會形成棋盤。第三梯度提供顏色填充。

為了添加圓角，我們使用編碼的SVG覆蓋了子彈點的字形：

 div {
  背景： 
    重復(fù)左-17px頂部-22px/55px 55px
    URL（“數(shù)據(jù)：Image/svg XML， <svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color: white; font-size: 35px" xmlns="http://www.w3.org/1999/xhtml"> ?</div></foreignobject></svg> ”）， 
    重復(fù)線性級別（
      右，透明，
      透明50px，
      白色50px，
      白色55px
    ），
    重復(fù)線性級別（
      底部，透明，
      透明50px，
      白色50px，
      白色55px
    ），
    線性畢業(yè)生（45度，粉紅色，Skyblue）；
  / *更多樣式 */
}

repeat關(guān)鍵字指示重復(fù)背景圖像。 left -17px top -22px/55px 55px設(shè)置每個重復(fù)單元的位置和大小，仔細(xì)抵消以與網(wǎng)格交叉點對齊。 SVG包含HTML<div>顯示字形的元素；它的<code>font-size直接影響正方形的角半徑。擴展的SVG看起來像這樣：

<svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color:white;font-size:35px" xmlns="http://www.w3.org/1999/xhtml"> ?</div></foreignobject></svg>

最后，讓我們添加懸停效果：

 DIV：懸停{
  背景：
    重復(fù)線性級別（
      右，透明，
      透明50px，
      RGB（255 255 255 / 0.5）50px，
      RGB（255 255 255 / 0.5）55px
    ），
    重復(fù)線性級別（
      底部，透明，
      透明50px，
      RGB（255 255 255 / 0.5）50px，
      RGB（255 255 255 / 0.5）55px
    ），
    線性畢業(yè)生（45度，粉紅色，Skyblue）；
  盒子陰影：10px 10px 20px粉紅色；
}

這可以消除懸停的字形，并使用α透明度使用rgb()使白線半透明。 box-shadow增加了微妙的效果。

該技術(shù)提供了一種具有CSS的圓形棋盤板圖案的創(chuàng)造性和有效方法，為各種交互式風(fēng)格提供了靈活性。我歡迎評論中的其他方法！