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

Chrome überwacht Cookie-Änderungen und weist Werte zu

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Dieser Artikel verwendet den Befehl crontab in de...

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

Chrome überwacht Cookie-Änderungen und weist Werte zu

So lösen Sie das Problem verstümmelter chinesischer Zeichen beim Einfügen von Tabellendaten in MySQL

Wird der veraltete Docker durch Podman ersetzt?

JavaScript + HTML zur Implementierung der Sliding-Verifizierung für Front-End-Seiten

So erstellen Sie eine LNMP-Umgebung unter Ubuntu 20.04

Installieren des Betriebssystems Windows Server 2008 auf einer virtuellen Maschine

Reflexion und Proxy in Front-End-JavaScript

Lernen Sie Node.js von Grund auf

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14 (allgemein)

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Artikel empfehlen

Detaillierte Erklärung der Vue-Ereignisbehandlung und Ereignismodifikatoren

Code zum Aktivieren von IE8 im IE7-Kompatibilitätsmodus

jQuery implementiert die Formularvalidierung

Tutorial zur Installation der PyTorch-Entwicklungsumgebung unter Windows

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

MySQL-Unterabfrage und Details zur Verknüpfungstabelle

CSS implementiert den Texteingabefeldstil von Google Material Design (empfohlen)

Wartungsmethode für den Innodb-Systemtabellenbereich

Webdesign-Tipps für Formular-Eingabefelder

Auswahl und Überlegungen zur MySQL-Datensicherungsmethode

Beschreibung der HTML-Meta-Viewport-Attribute

Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)

Detaillierte Erläuterung der grundlegenden Verwaltung der KVM-Virtualisierung in CentOS7

MySQL zeigt die maximale Anzahl von Verbindungen an und ändert die maximale Anzahl von Verbindungen