CSS棋盤背景...但是具有圓角和懸停樣式

。但是，在不訴諸複雜的CSS梯度的情況下實現圓角可能是具有挑戰性的。本文使用具有SVG字形的巧妙技巧提出了一種創造性的解決方案。

最初，我努力地繞過基本方格模式的角落。 Then, I remembered the versatility of the bullet point glyph (✦) and realized that overlaying it on each intersection could create the desired rounded effect.

Let's begin with the fundamental checkered pattern:

<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); / *更多樣式 */} 

此代碼生成了正方形的重複模式，從粉紅色到天藍，具有5px白色間隙。 重複線性級別函數會創建水平和垂直白色條紋，在分層時，會形成棋盤。第三個梯度提供了顏色填充。

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

 div {背景：重複-17px top -22px/55px 55px 55px url（ www.w3.org/2000/svg'> <foreignobject> <div   style="max-width:90%"> <p> <code>重複</code>關鍵字指示重複背景圖像。 <code>左-17PX TOP -22PX/55PX 55PX </code>設置每個重複單元的位置和大小，仔細偏移以與網格交叉點保持一致。 SVG包含HTML <code> <div> 顯示字形的元素；它的<code>字體大小</code>直接影響正方形的角半徑。擴展的SVG看起來像這樣： <pre class="brush:php;toolbar:false"> <svg viewbox="“" xmlns="“" http:> <firedobject> <firedobject w.w3.org>✦</firedobject></firedobject></svg>