CSSチェッカーボードの背景...しかし、丸い角とホバースタイルがあります

CSSでシンプルなチェッカー背景を作成するのは簡単です。ただし、複雑なCSS勾配に頼らずに丸い角を達成することは困難な場合があります。この記事では、SVGグリフを使用した巧妙なトリックを使用した創造的なソリューションを紹介します。

当初、私は基本的な市松模様のパターンの角を回るのに苦労しました。次に、箇条書きグリフの汎用性（✦）を思い出し、各交差点でそれをオーバーレイすることで、目的の丸い効果を生み出す可能性があることに気付きました。

基本的なチェッカーパターンから始めましょう。

<div></div>

 div {
  背景： 
    繰り返し線形勾配（
      右に、透明、 
      透明50px、 
      白い50px、 
      白い55px
    ）、、
    繰り返し線形勾配（
      一番下、透明、  
      透明50px、 
      白い50px、 
      白い55px
    ）、、
    線形勾配（45deg、ピンク、スカイブルー）;
  / *その他のスタイル */
}

このコードは、ピンクからスカイブルーに移行する正方形の繰り返しパターンを生成し、5pxの白いギャップを備えています。 repeating-linear-gradient関数は、水平と垂直の白いストライプを作成し、レイヤリングするとチェッカーボードを形成します。 3番目の勾配は、色の塗りつぶしを提供します。

丸い角を追加するには、エンコードされたSVGを使用して箇条書きグリフをオーバーレイします。

 div {
  背景： 
    左-17pxトップ-22px/55px 55pxを繰り返します
    url（ "データ：画像/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> "）、 
    繰り返し線形勾配（
      右に、透明、
      透明50px、
      白い50px、
      白い55px
    ）、、
    繰り返し線形勾配（
      一番下、透明、
      透明50px、
      白い50px、
      白い55px
    ）、、
    線形勾配（45deg、ピンク、スカイブルー）;
  / *その他のスタイル */
}

repeatキーワードは、繰り返しの背景画像を示します。 left -17px top -22px/55px 55px各繰り返しユニットの位置とサイズを設定し、グリッドの交差点に合わせて慎重にオフセットします。 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：Hover {
  背景：
    繰り返し線形勾配（
      右に、透明、
      透明50px、
      RGB（255 255 255 / 0.5）50px、
      RGB（255 255 255 / 0.5）55px
    ）、、
    繰り返し線形勾配（
      一番下、透明、
      透明50px、
      RGB（255 255 255 / 0.5）50px、
      RGB（255 255 255 / 0.5）55px
    ）、、
    線形勾配（45deg、ピンク、スカイブルー）;
  Box-Shadow：10px 10px 20pxピンク。
}

これにより、ホバーのグリフが削除され、アルファ透明度を備えたrgb()を使用して白い線を半透明にします。 box-shadow微妙な効果を追加します。

この手法は、CSSを使用して丸みを帯びたコーナーチェッカーボードパターンを実現するための創造的で効果的な方法を提供し、さまざまなインタラクティブスタイルに柔軟性を提供します。コメントで代替アプローチを歓迎します！

以上がCSSチェッカーボードの背景...しかし、丸い角とホバースタイルがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。