CSS realisiert den Effekt „Eckschnitt + Rahmen + Projektion + Farbverlauf im Inhaltshintergrund“
|
Verwenden Sie einfach CSS, um alle Effekte von Eckausschnitt + Rahmen + Projektion + Farbverlauf des Inhaltshintergrunds zu erzielen. Da die Benutzeroberfläche keinen Hintergrundausschnitt hat, denke ich, dass dies theoretisch mit CSS erreicht werden kann. Schauen Sie sich das Endergebnis an:
Lassen wir zunächst einmal den violett-blauen Farbverlauf des Inhalts außen vor. Ein einfacher Vier-Ecken-Schnitt + schwarzer Rand + Umrissprojektion. Tatsächlich genügt es, den im Internet allgegenwärtigen Hintergrund: linearen Farbverlauf zu verwenden, um den Eckschnitt zu erzielen + eine 1 Pixel kleinere Schicht aus Pseudoelementen, um den Rand zu erzielen + Filter: Box-Shadow, um die Projektion zu erzielen. Der Effekt und der Code sind wie folgt:
<html>
<Text>
<div Klasse="Box"></div>
</body>
<Stil>
Körper {
Hintergrundfarbe: #55486b;
}
.Kasten {
Rand: 20px;
Breite: 200px;
Höhe: 200px;
Z-Index: 0;
Hintergrund: linearer Farbverlauf(
135 Grad,
transparente Berechnung (10px + 1 * 0,414px),
#18121a 0
)
oben links,
linearer Gradient(
-135 Grad,
transparente Berechnung (10px + 1 * 0,414px),
#18121a 0
)
oben rechts,
linearer Farbverlauf (-45 Grad, transparente Berechnung (10 Pixel + 1 * 0,414 Pixel), #18121a 0)
unten rechts,
linearer Farbverlauf (45 Grad, transparente Berechnung (10 Pixel + 1 * 0,414 Pixel), #18121a 0)
unten links;
Hintergrundgröße: 55 % 50 %;
Hintergrundwiederholung: keine Wiederholung;
Position: relativ;
Filter: Schlagschatten (1px 1px 2px rgba(255, 255, 255, 0,3));
}
.box::nach {
Z-Index: 1;
Breite: berechnet (100 % – 2 * 1 Pixel);
Höhe: berechnet (100 % – 2 * 1 Pixel);
Inhalt: "";
Anzeige: Block;
Hintergrund: linearer Farbverlauf (135 Grad, transparent 10 Pixel, #3c2f4f 0) oben links,
linearer Farbverlauf (-135 Grad, transparent 10 Pixel, #3c2f4f 0) oben rechts,
linearer Farbverlauf (-45 Grad, transparent 10 Pixel, #3c2f4f 0) unten rechts,
linearer Farbverlauf (45 Grad, transparent 10 Pixel, #3c2f4f 0) unten links;
Hintergrundgröße: 55 % 51 %;
Hintergrundwiederholung: keine Wiederholung;
Position: absolut;
links: 1px;
oben: 1px;
}
</Stil>
</html>Dies entspricht dem diagonalen Abschneiden der vier Ecken durch Zusammenfügen eines kleinen Abschnitts transparenter Farbe und eines großen Abschnitts Hintergrundfarbe. Die Hintergrundgröße sollte größer als 50 % sein, um weiße Linienfehler zu vermeiden. Fügen Sie eine weitere Ebene kleiner Pseudoelemente in das große Div ein, um die Grenze zu realisieren. Da es sich jedoch um vier Hintergrundfarben handelt, scheint es unmöglich, einen Farbverlauf über den gesamten Inhalt hinweg zu erzielen. Um einen Farbverlauf im Inhaltsbereich zu erzielen, können wir die Idee ändern. Der Hintergrund des Pseudoelements im Inneren ist ein Farbverlauf, und die vier Ecken werden durch andere Attribute abgeschnitten. Auf diese Weise gibt es andere Implementierungsmethoden. Schauen wir uns das zunächst einmal an: Methode 1: MaskeAndere Dinge bleiben unverändert. Das Pseudoelement verwendete zuvor dieselbe Idee wie die äußere Ebene, um Eckenschnitte zu erreichen. Diese Idee kann keinen vertikalen Farbverlauf erreichen (da der Eckenschnitt bereits durch einen diagonalen transparenten Farbverlauf erfolgt). Schreiben Sie also die Hintergrundfarbe direkt als Farbverlauf und verwenden Sie das Maskenattribut, um die vier Ecken transparent zu machen:
.box::nach {
Z-Index: 1;
Breite: berechnet (100 % – 2 * 1 Pixel);
Höhe: berechnet (100 % – 2 * 1 Pixel);
Inhalt: "";
Anzeige: Block;
Hintergrund: linearer Farbverlauf (180 Grad, #3c2f4f, #2e2269);
-webkit-mask: linearer Farbverlauf (135 Grad, transparent 10 Pixel, #3c2f4f 0) oben
links,
linearer Farbverlauf (-135 Grad, transparent 10px, #3c2f4f 0) oben rechts,
linearer Farbverlauf (-45 Grad, transparent 10px, #3c2f4f 0) unten rechts,
linearer Farbverlauf (45 Grad, transparent 10 Pixel, #3c2f4f 0) unten links;
-Webkit-Maskengröße: 55 % 51 %;
-webkit-mask-repeat: keine Wiederholung;
Position: absolut;
links: 1px;
oben: 1px;
}Ändern Sie einfach leicht den Stil des Pseudoelements im obigen Code und schon haben Sie es. Methode 2: Clip-PfadDas Clip-Path-Attribut kann den Rahmen um das Element direkt zuschneiden. Wenn es direkt auf das Pseudoelement oben angewendet wird, werden Sie feststellen, dass auch der Schatten abgedeckt ist. Ändern wir also unsere Denkweise und verzichten einfach auf die Pseudoelementebene und schneiden das Div direkt in 4 Ecken zu. Da das Filterattribut überlagert werden kann, fügen Sie seinem übergeordneten Element einen Filter hinzu. Die ersten n + 1 Schlagschatten werden überlagert, um einen schwarzen Rand zu bilden, und der letzte Schlagschatten realisiert eine hellweiße Projektion. Die Wirkung ist wie folgt:
<html>
<Text>
<div Klasse="äußere">
<div Klasse="Box"></div>
</div>
</body>
<Stil>
Körper {
Hintergrundfarbe: #55486b;
}
.äußeres {
Filter: Schlagschatten (0px 0px 1px #18121a) Schlagschatten (0px 0px 1px #18121a)
Schlagschatten (0px 0px 1px #18121a)
Schlagschatten (2px 1px 3px rgba (255, 255, 255, 0,3));
}
.Kasten {
Rand: 20px;
Breite: 200px;
Höhe: 200px;
Rahmenradius: 12px;
Position: relativ;
Hintergrund: linearer Farbverlauf (180 Grad, #3c2f4f, #2e2269);
-webkit-clip-path: Polygon(
20px 0%,
berechnen (100 % – 20 Pixel) 0 %,
100 % 20 Pixel,
100 % berechnet (100 % – 20 Pixel),
berechnen (100 % – 20 Pixel) 100 %,
20px 100%,
0 berechnet (100 % - 20 Pixel),
0 20px
);
Clip-Pfad: Polygon(
20px 0%,
berechnen (100 % – 20 Pixel) 0 %,
100 % 20 Pixel,
100 % berechnet (100 % – 20 Pixel),
berechnen (100 % – 20 Pixel) 100 %,
20px 100%,
0 berechnet (100 % - 20 Pixel),
0 20px
);
Position: relativ;
}
</Stil>
</html>Ich weiß nicht, ob es eine einfachere und kompatiblere Methode gibt~~~~ Damit ist dieser Artikel über die Verwendung von CSS zum Erzielen von Eckenschnitt-, Rahmen-, Projektions- und Inhaltshintergrundfarbverlaufseffekten abgeschlossen. Weitere verwandte CSS-Hintergrundfarbverlaufsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Zusammenfassung der Verwendung von Datetime und Timestamp in MySQL
Artikel empfehlen
Binäre Installation von MySQL 5.7.23 unter CentOS7
Die Installationsinformationen im Internet sind u...
Einführung in berechnete Eigenschaften in Vue
Inhaltsverzeichnis 1. Was ist eine berechnete Eig...
Vermeiden Sie den Missbrauch zum Lesen von Daten in Vue
Inhaltsverzeichnis Vorwort 1. Der Prozess der Ver...
Detaillierter Prozess der SpringBoot-Integration von Docker
Inhaltsverzeichnis 1. Demo-Projekt 1.1 Schnittste...
Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL
Als ich MySQL konfiguriert habe, habe ich die Sta...
Detaillierte Erklärung zur Verwendung des Split-Befehls zum Teilen von Linux-Dateien
Mithilfe einiger einfacher Linux-Befehle können S...
Tipps zum Hinzufügen eines Favicons zu einer Website: ein kleines Symbol vor der URL
Das sogenannte Favicon, die Abkürzung für Favorite...
Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus
transform:scale() lässt sich ein proportionales V...
Eine detaillierte Diskussion der Auswertungsstrategien in JavaScript
Inhaltsverzeichnis Eine Kastanie zum Abdecken Par...
Vertieftes Verständnis davon in JavaScript
Vertieftes Verständnis davon in Js JavaScript Ber...
Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3
Die äußerste BoxF dreht sich um 120 Grad, die zwe...
So fügen Sie Codebeispiele für die Vim-Implementierung in Power Shell hinzu
1. Gehen Sie zur offiziellen Website von Vim, um ...
So implementieren Sie die GZIP-Komprimierung in Nginx, um die Website-Geschwindigkeit zu verbessern
Inhaltsverzeichnis Warum GZIP-Komprimierung verwe...
CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken
Dies ist ein sehr einfacher, reiner CSS3-Hintergr...
So beheben Sie den Verbindungsfehler zur Datenbank beim Start von ServerManager
Servermanager-Startfehler bei Verbindung zur Date...