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>
<!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
<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>
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
Artikel empfehlen
Vue implementiert Drag & Drop oder Klicken zum Hochladen von Bildern
In diesem Artikel wird der spezifische Code von V...
Standardtypen für generische TypeScript-Parameter und neue Option zur strikten Kompilierung
Inhaltsverzeichnis Überblick Erstellen Sie eine T...
So fügen Sie schnell 10 Millionen Datensätze in MySQL ein
Ich habe gehört, dass es eine Interviewfrage gibt...
Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage
Im Allgemeinen muss, nachdem sich auf der linken ...
JS-Implementierung eines Karussellbeispiels
In diesem Artikel wird der spezifische JS-Code zu...
js realisiert horizontale und vertikale Slider
Als ich kürzlich an einem Übungsprojekt arbeitete...
Zusammenfassung der englischen Namen chinesischer Schriftarten
Wenn Sie in CSS die Eigenschaft „font-family“ ver...
Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten
In diesem Artikel werde ich die relevanten Inhalt...
React-native-Beispielcode zur Implementierung des Schiebelöscheffekts des Einkaufswagens
Grundsätzlich verfügen alle E-Commerce-Projekte ü...
Sprechen Sie über die 8 Benutzerinstinkte hinter der Benutzererfahrung im Design
Anmerkung des Herausgebers: Dieser Artikel wurde ...
Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)
Der erste Schritt beim Design ist immer die Optimi...
Flammenanimation mit CSS3 umgesetzt
Ergebnisse erzielen Implementierungscode html <...
Analyse der MySql-Indexnutzungsstrategie
MySql-Index Indexvorteile 1. Sie können die Einde...
Eine Lösung für einen Fehler in IE6 mit jquery-multiselect
Bei der Verwendung von jquery-multiselect (einem ...
So rufen Sie das unterbrochene System in Linux auf
Vorwort Langsame Systemaufrufe beziehen sich auf ...