Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)

In diesem Artikel werden hauptsächlich kreisförmige CSS-Aushöhlungen (häufig als Hintergrundbild für Gutscheine verwendet) vorgestellt und mit Ihnen geteilt. Die Einzelheiten sind wie folgt:

.hohl-zusammensetzen-drei-Kreise {
  Breite: 300px;
  Höhe: 100px;
  Position: relativ;
  Hintergrund: radialer Farbverlauf (Kreis oben rechts, transparent 10px, #00adb5 0) oben links / 60px 51% keine Wiederholung,
    radial-gradient(Kreis rechts unten, transparent 10px, #00adb5 0) unten links /60px 51% keine Wiederholung,
    radial-gradient(Kreis oben links, transparent 10px, #eeeeee 0) 60px 0/230px 51% keine Wiederholung,
    radial-gradient(Kreis unten links, transparent 10px, #eeeeee 0) 60px 50px /230px 51% keine Wiederholung,
    radialer Farbverlauf (Kreis bei 10px 50px, transparent 10px, #eeeeee 0) 290px 0/10px 100px keine Wiederholung;
   Filter: Schlagschatten (2px 2px 2px rgba (0,0,0,.2));
}

.hollow-compose-three-circles::nach {
  Inhalt: '';
  Höhe: 80px;
  Rand: 1px gestrichelt #fff;
  Position: absolut;
  links: 60px;
  oben: 0;
  unten: 0;
  Rand: automatisch;
}
<div Klasse = "hollow-compose-three-circles"></div>

Rendern

<!doctype html>
<Kopf>
<meta charset="UTF-8">
<title>Prozess</title>
<Stil>
	Körper{
		Hintergrund: grau;
	}
   .viele-Kreise {
      Rand: 10px 0 0 40px;
	    Breite: 200px;
	    Höhe: 100px;
	   Hintergrund: radialer Farbverlauf (Kreis rechts, transparent 10px, #00adb5 0) oben rechts / 51 % 60px keine Wiederholung,
	    radialer Farbverlauf (Kreis links, transparent 10px, #00adb5 0) oben links / 51 % 60px keine Wiederholung;
	    /*radial-gradient(Kreis oben rechts, transparent 10px, #eeeeee 0) unten rechts / 51% 40px keine Wiederholung,
	    radial-gradient(Kreis oben links, transparent 10px, #eeeeee 0) unten links / 51% 40px keine Wiederholung;*/
	   Filter: Schlagschatten (2px 2px 2px rgba (0,0,0,.2));
}

</Stil>
</Kopf>
<Text>
	
 <div data-v-85036100="" Klasse="many-circles"></div>
<Skript>
</Skript>
</body>
</html>

Die Wirkung ist wie folgt

Bildbeschreibung hier einfügen

<Stil>
	Körper{
		Hintergrund: grau;
	}
	
   .hohler-ein-Kreis{
		Anzeige: Inline-Block;
	  Breite: 246px;
	  Höhe: 218px;
	  Position: relativ;
	  Hintergrund: radialer Farbverlauf (Kreis bei 0 106px, transparent 10px, #FF4654 0) oben links/246px 100 % keine Wiederholung;  
	}
	.hohl-eins-rechts{
		Anzeige: Inline-Block;
		Breite: 718px;
		  Höhe: 218px;
		  Position: relativ;
		Hintergrund: radialer Farbverlauf (Kreis bei 718px 106px, transparent 10px, #ffffff 0) oben links/718px 100 % keine Wiederholung;
		
Boxschatten: 3px 0px 13px 0px rgba (0,0,0,0,0,03);
	}

.hollow-one-circle::vor {
  Inhalt: '';
  Position: absolut;
  Höhe: 100%;
  Breite: 5px;
  oben: 4px;
  links: 246px;
  Hintergrundbild: linearer Farbverlauf (nach unten, #FF4654 5px, transparent 5px, transparent),
  radialer Farbverlauf (10px Kreis bei 5px 10px, transparent 5px, #FF4654 5px);
  Hintergrundgröße: 5px 15px;
}
.hollow-one-circle:nach {
  
}
</Stil>
<div data-v-85036100="" Klasse="hollow-one-circle"></div>
<div data-v-85036100="" Klasse="hollow-one-right"></div>

Die Wirkung ist wie folgt

Dies ist das Ende dieses Artikels über CSS-Kreishohlungen (häufig als Hintergrundbild für Gutscheine verwendet). Weitere relevante Inhalte zu CSS-Kreishohlungen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

>>: Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen

Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)

So bedienen Sie Docker und Images

Beschreibung der chinesischen Sortierregeln für MySQL

js implementiert einen einfachen Rechner

Die Rolle der neuen Feature-Window-Funktionen von MySQL 8

CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18

Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips

Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien

So installieren Sie ElasticSearch auf Docker in einem Artikel

Beispielcode für MySQL-Datensicherung und -wiederherstellung

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

Artikel empfehlen

js implementiert zufälligen Namensaufruf

Vue implementiert die Countdown-Komponente für zweite Kills

So implementieren Sie die Wiederverwendung von Logik mit der Vue3-Kompositions-API

Über den Unterschied zwischen der Überprüfung von Elementen und der Anzeige des Quellcodes einer Webseite

Durch reines CSS können untergeordnete Elemente die Breitenbeschränkung übergeordneter Elemente durchbrechen.

Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.

MySql fügt Daten erfolgreich ein, meldet aber [Err] 1055 Fehlerlösung

Eine kurze Diskussion über die Berechnungsmethode von key_len in MySQL erklären

So installieren Sie ein Linux-System (Redhat8) und die Netzwerkkonfiguration virtueller Maschinen in VMware

Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen

Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung

Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)

So verwenden Sie CSS-Attributselektoren zum Spleißen von HTML-DNA

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (2)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17