Der CSS-Schatteneffekt ist eine CSS-Eigenschaft, die wir häufig verwenden, aber haben Sie ihn jemals genau verstanden? Müssen Sie es einfach direkt aus Blue Lake kopieren, wenn Sie es verwenden? Verstehen Sie jeden seiner Parameter? Welche schönen Effekte lassen sich mit Schatten erzielen?
Schatteneffekte werden häufig im Webdesign verwendet. Wenn wir vor der Einführung von CSS3 Schatteneffekte zu Texten oder Elementen hinzufügen wollten, mussten wir dafür Bilder verwenden, was sehr unpraktisch war. Nach der Einführung von CSS3 können wir über die beiden Eigenschaften text-shadow und box-shadow Schatteneffekte zu Texten oder Elementen hinzufügen, ohne Bilder zu verwenden.
1. Textschatten
Mit der text-shadow-Eigenschaft von CSS können wir einen Schatteneffekt für Text festlegen. Die Syntax der Eigenschaft lautet wie folgt:
text-shadow:offset-xoffset-yblurcolor;
Die Syntax wird wie folgt erklärt:
(1) offset-x: erforderlicher Parameter, legt den horizontalen Versatz des Schattens fest, der ein negativer Wert sein kann;
(2) offset-y: erforderlicher Parameter, legt den vertikalen Versatz des Schattens fest, der ein negativer Wert sein kann;
(3) Unschärfe: Optionaler Parameter. Je größer der Wert, desto größer die Unschärfe. Negative Werte sind nicht zulässig.
(4) Farbe: Optionaler Parameter, legen Sie die Farbe des Schattens fest. Wenn der Wert weggelassen oder nicht angegeben wird, wird der Wert des Farbattributs verwendet.
Tipp: Verwenden Sie das Attribut text-shadow, um mehrere Gruppen von Schatteneffekten gleichzeitig festzulegen. Verwenden Sie Kommas, um die einzelnen Gruppen zu trennen. Die definierten Gruppen von Schatteneffekten werden in der Reihenfolge ihrer Definition aufgelistet, wobei der erste Schatten oben steht bald. Wenn Sie außerdem den Schatteneffekt des Textes aufheben möchten, können Sie den Wert des text-shadow-Attributs auf „none“ setzen.
[Beispiel] Verwenden Sie das text-shadow-Attribut, um dem Text einen Schatteneffekt hinzuzufügen:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>text-shadow</title></head><style>div :first-child{text-shadow:5px8px3pxred;}</style><body><div>Text-shadow</div></body></html>Laufergebnisse:
Analyse: Textschatten: 5px 8px 3px rot; Parameterbeschreibung
2.Box-Schatten
Mit der Box-Shadow-Eigenschaft von CSS können wir den Schatteneffekt für HTML-Elemente festlegen. Die Syntax der Eigenschaft ist wie folgt:
box-shadow:h-shadowv-shadowblurspreadcolorinset;
Die Syntax wird wie folgt erklärt:
(1) h-shadow: erforderlicher Parameter, legt den Versatz des Schattens in horizontaler Richtung fest, der ein negativer Wert sein kann;
(2) v-shadow: erforderlicher Parameter, legt den Versatz in vertikaler Richtung des Schattens fest, der ein negativer Wert sein kann;
(3) Unschärfe: Optionaler Parameter. Je größer der Wert, desto größer die Unschärfe. Negative Werte sind nicht zulässig.
(4) Spread: optionaler Parameter, legt die Größe des Schattens fest;
(5) Farbe: optionaler Parameter, legt die Farbe des Schattens fest;
(6) Einschub: optionaler Parameter, ändert den standardmäßigen äußeren Schatten (Anfang) in einen inneren Schatten.
Tipp: Ähnlich wie das Text-Shadow-Attribut können auch mit dem Box-Shadow-Attribut mehrere Gruppen von Schatteneffekten gleichzeitig festgelegt werden. Verwenden Sie Kommas, um die einzelnen Gruppen zu trennen. Die mehreren definierten Gruppen von Schatteneffekten werden in der Reihenfolge ihrer Definition aufgelistet. mit dem ersten Schatten am Ende oben und so weiter.
[Beispiel] Verwenden Sie das Box-Shadow-Attribut, um dem Text einen Schatteneffekt hinzuzufügen:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style>div :first-child{width:200px;height:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>Laufergebnisse:
Analyse: Box-Shadow: 5px 8px 3px 2px rot; Parameterbeschreibung