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
Beispiele für die Verwendung des ES6-Spread-Operators
Inhaltsverzeichnis Was sind Spread- und Rest-Oper...
JavaScript implementiert den detaillierten Prozess der Stapelstruktur
Inhaltsverzeichnis 1. Die Stapelstruktur verstehe...
Detaillierte Erklärung zur Verwendung von css-vars-ponyfill in der IE-Umgebung (nextjs-Build)
CSS-Vars-Ponyfill Bei der Verwendung von CSS-Vari...
Detaillierte Erläuterung des Ausführungsprozesses der MySQL-Update-Anweisung
Es gab bereits einen Artikel über den Ausführungs...
Detaillierte Erklärung des Sandbox-Mechanismus von Vue3
Inhaltsverzeichnis Vorwort Browser kompilierte Ve...
Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems
Inhaltsverzeichnis 1. Die Richtung davon in der F...
So konfigurieren Sie pseudostatisches und clientadaptives Nginx
Das Backend verwendet das Framework thinkphp3.2.3...
Konfigurieren Sie eine Selenium-Umgebung basierend auf Linux und implementieren Sie den Betrieb
1. Selenium unter Linux verwenden 1. Installieren...
So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten
Dieses Tutorial verwendet CentOS 7 64-Bit. Weisen...
js implementiert das klassische Minesweeper-Spiel
In diesem Artikelbeispiel wird der spezifische Co...
Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten
Vue verwendet Ref, um Komponenteninstanzen über E...
Beispielcode zum Implementieren eines gleichhohen Layouts auf mehrere Arten mit CSS
Das in diesem Artikel beschriebene Layout gleiche...
Der gesamte Prozess der Verwendung von node.js Express zum automatischen Erstellen des Projekts
1. Installieren Sie die Express-Bibliothek und de...
Installieren Sie eine virtuelle Python-Umgebung in Ubuntu 18.04
Nur als Referenz für Python-Entwickler, die Ubunt...
So verwenden Sie webSocket zum Aktualisieren des Echtzeitwetters in Vue
Inhaltsverzeichnis Vorwort Informationen zu WebSo...