Heim > Artikel > Web-Frontend > Detaillierte Interpretation visueller Effekte bei der Anwendung neuer CSS3-Funktionen
Hintergrund und Rand Teil Eins
Hintergrund und Rand Teil Zwei
Formen
Visuals
Typografie
Benutzererfahrung
Struktur und Layout
Übergang und Animation
Quellcode-Download
Anwendung des Box-Shadow-Attributs, Format: H-Shadow V-Shadow Blur Spread Color Inset-Attributwert-Einführung
h-sahdow: Die Position des horizontalen Schattens, negative Werte sind zulässig
v-shadow: Die Position des vertikalen Schattens, negative Werte sind zulässig erlaubt
Unschärfe: Unschärfeabstand
Spreizung: Die Größe des Schattens, Ausdehnungsabstand, kann negativ sein
Farbe: die Farbe des Schattens
Einsatz/Anfang: innerer oder äußerer Schatten
Der Ausdehnungsabstand Die Darstellung des Schattens gilt für alle vier Seiten und kann nicht nur auf eine Seite angewendet werden.
box-shadow unterstützt Einstellungen für mehrere Wertesätze, die gleichzeitig wirksam werden
Beispielcode:
.wrap{ width: 200px; height: 120px; background: yellowgreen; box-shadow: 2px 0px 4px -2px black, -2px 0px 4px -2px black; }
Die durch den Randradius erzeugte Form ist gut zu verwenden Projektion, aber wenn Pseudoelemente und Hälften hinzugefügt werden Bei transparenter Dekoration ist die Schattenleistung sehr schlecht und es treten in den folgenden Situationen Probleme auf.
transluzentes Bild, Hintergrundbild oder Randbild
-Element ist auf gepunktet, gepunktet eingestellt oder durchscheinender Rand, aber kein Hintergrund (oder wenn background-clip kein border-box ist)
Kleine Ecken innerhalb des Elements werden mithilfe von Pseudoelementen generiert
Durch Clip-Pfad generierte Form
Lösung: Verwenden Sie den Schlagschatten von SVG, um
.wrap{ width: 200px; height: 120px; border: 6px dotted yellowgreen; --box-shadow: 0px 0px 4px 0px black; -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1)) }3. Chromosomeneffekt
.wrap1{ width: 200px; height: 120px; overflow: hidden; } .wrap1 > img{ max-height: 100%; max-width: 100%; -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg); } .wrap2{ width: 200px; height: 120px; background: hsl(335, 100%, 50%); overflow: hidden; } .wrap2 > img{ height: 100%; width: 100%; mix-blend-mode: luminosity; } .wrap3{ width: 200px; height: 120px; background-size: cover; background-color: hsl(335, 100%, 50%); background-image: url("../img/cat.png"); background-blend-mode: luminosity; }4. Milchglaseffekt
Das Hauptimplementierungsprinzip: Der Hintergrund des Inhaltspseudoelements ist derselbe wie das Bild des darunter liegenden Hintergrunds und fügt Filter hinzu: Unschärfefilter. Beachten Sie, dass die Unschärfe nicht auf den darunter liegenden Hintergrund und auch nicht auf den Hintergrund eines Elements angewendet werden kann (dies führt dazu, dass das Element selbst unscharf wird und der Text unsichtbar wird). Es kann nur auf demDer Code lautet wie folgt:-Pseudo verwendet werden -element .
body{ background: url("../img/cat.png") no-repeat; background-size: cover; }.wrap{ position: relative; width: 500px; margin: 0px auto; padding: 10px; line-height: 1.5; background: hsla(0, 0%, 100%, .3); overflow: hidden; }.wrap::before{ content: ''; background: url("../img/cat.png") 0/cover fixed; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); z-index: -1; margin: -30px; }Codebeschreibung:
absolute Positionierung eingestellt, und die Z-Index-Ebene ist nur höher als der Hintergrund
Implementierungsschritte
.wrap{ background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em, linear-gradient(-135deg, transparent 1.4em, #58a 0); width: 200px; height: 120px; }Hinweis
Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation visueller Effekte bei der Anwendung neuer CSS3-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!