CSS -Schachbretthintergrund ... aber mit abgerundeten Ecken und Schwebstilen

Das Erstellen eines einfachen karierten Hintergrunds mit CSS ist unkompliziert. Es kann jedoch eine Herausforderung sein, abgerundete Ecken zu erreichen, ohne auf komplexe CSS -Gradienten zurückzugreifen. Dieser Artikel enthält eine kreative Lösung mit einem cleveren Trick mit SVG -Glyphen.

Zunächst bemühte ich mich, die Ecken eines grundlegenden karierten Musters umzugehen. Dann erinnerte ich mich an die Vielseitigkeit des Bullet Point Glyphe (✦) und stellte fest, dass das Überlagern an jeder Kreuzung den gewünschten abgerundeten Effekt erzeugen konnte.

Beginnen wir mit dem grundlegenden karierten Muster:

<div></div>

 div {
  Hintergrund: 
    Wiederholungs-Linear-Gradient (
      nach rechts, transparent, 
      transparent 50px, 
      weiß 50px, 
      Weiß 55px
    ),
    Wiederholungs-Linear-Gradient (
      nach unten, transparent,  
      transparent 50px, 
      weiß 50px, 
      Weiß 55px
    ),
    linearer Gradient (45 Grad, Pink, Skyblue);
  / * mehr Stile */
}

Dieser Code generiert ein wiederholtes Muster von Quadraten, das von Pink zu SkyBlue mit 5px -weißen Lücken übergeht. Die repeating-linear-gradient -Funktion erzeugt horizontale und vertikale weiße Streifen, die beim Schicht das Schachbrett bilden. Der dritte Gradient liefert die Farbfüllung.

Um die abgerundeten Ecken hinzuzufügen, überlagern wir den Bullet Point -Glyphe mit einem codierten SVG:

 div {
  Hintergrund: 
    Wiederholen Sie links -17px obere -22px/55px 55px
    URL ("Daten: Bild/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> "),, 
    Wiederholungs-Linear-Gradient (
      nach rechts, transparent,
      transparent 50px,
      weiß 50px,
      Weiß 55px
    ),
    Wiederholungs-Linear-Gradient (
      nach unten, transparent,
      transparent 50px,
      weiß 50px,
      Weiß 55px
    ),
    linearer Gradient (45 Grad, Pink, Skyblue);
  / * mehr Stil */
}

Das repeat zeigt ein wiederholtes Hintergrundbild an. left -17px top -22px/55px 55px legt die Position und Größe jeder Wiederholungseinheit fest, um sich vorsichtig mit den Gitterkritionen auszurichten. Die SVG enthält eine HTML<div> Element, das die Glyphe anzeigt; Seine <code>font-size beeinflusst direkt den Eckradius des Quadrats. Der erweiterte SVG sieht so aus:

<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>

Lassen Sie uns schließlich einen Schweberffekt hinzufügen:

 Div: Hover {
  Hintergrund:
    Wiederholungs-Linear-Gradient (
      nach rechts, transparent,
      transparent 50px,
      RGB (255 255 255 / 0,5) 50px,
      RGB (255 255 255 / 0,5) 55px
    ),
    Wiederholungs-Linear-Gradient (
      nach unten, transparent,
      transparent 50px,
      RGB (255 255 255 / 0,5) 50px,
      RGB (255 255 255 / 0,5) 55px
    ),
    linearer Gradient (45 Grad, Pink, Skyblue);
  Box-Shadow: 10px 10px 20px Pink;
}

Dadurch wird die Glyphe des Schwebers entfernt und macht die weißen Linien mithilfe von rgb() mit Alpha-Transparenz halbtransparent. Ein box-shadow fügt einen subtilen Effekt hinzu.

Diese Technik bietet einen kreativen und effektiven Weg, um ein Schachbrettmuster mit abgerundetem Ecker mit CSS zu erreichen, was Flexibilität für verschiedene interaktive Stile bietet. Ich begrüße alternative Ansätze in den Kommentaren!

Das obige ist der detaillierte Inhalt vonCSS -Schachbretthintergrund ... aber mit abgerundeten Ecken und Schwebstilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!