Detailliertes Beispiel der CSS3-Boxschatteneigenschaft

CSS3 – Schatten hinzufügen (mithilfe von Boxschatten)

CSS3 – Schatten zu Div oder Text hinzufügen (Verwendung von Boxschatten, Textschatten)

CSS3 definiert zwei Arten von Schatten: Kastenschatten und Textschatten. Für Kastenschatten ist IE9 oder höher erforderlich, während für Textschatten IE10 oder höher erforderlich ist. Im Folgenden wird die Verwendung von Box-Shadow-Schatten beschrieben:

1. Kastenschatten Kastenschatten

Die Box-Shadow-Eigenschaft fügt einer Box einen oder mehrere Schatten hinzu.

Grammatik:

Box-Shadow: Offset-X, Offset-Y, Unschärfe, Ausbreitung, Farbe, Einschub;

ox-shadow: X-Achsen-Versatz Y-Achsen-Versatz [Schattenunschärferadius] [Schattenerweiterung] [Schattenfarbe] [Projektionsmethode];

Worterklärung: Unschärfe: Unschärfe, Ausbreitung: Strecken, Einschub: konkav

Parametererklärung:

• Offset-x: Erforderlich, kann positiv oder negativ sein. Offset-x: Die horizontale Schattenposition.
• Offset-y: Erforderlich, kann positiv oder negativ sein. Offset-y: Die vertikale Schattenposition.
• Unschärfe: optional, kann nur positive Werte annehmen. Unschärferadius ist der Unschärferadius des Schattens. 0 bedeutet keinen Unschärfeeffekt. Je größer der Wert, desto unschärfer ist die Schattenkante.
• Spread: optional, kann positiv oder negativ sein. Die Ausbreitung stellt die Größe des Schattenumfangs dar, der sich auf die umliegenden Bereiche erstreckt. Positive Werte vergrößern den Schatten, negative Werte verkleinern den Schatten.
• Farbe: Optional. Die Farbe des Schattens. Wenn nicht festgelegt, verwendet der Browser die Standardfarbe, normalerweise Schwarz, aber die Standardfarben jedes Browsers sind unterschiedlich. Es wird daher empfohlen, sie nicht wegzulassen. Es kann entweder rgb(250,0,0) oder rgba(250,0,0,0,5) mit einem transparenten Wert sein.
• Einschub: Optional. Schlüsselwort, ändert die externe Projektion (Standardausgangspunkt) in eine interne Projektion. Einschub: Der Schatten liegt über dem Hintergrund und unter dem Inhalt.

Hinweis: Inset kann als erster oder letzter Parameter geschrieben werden und ist an anderen Positionen ungültig.

2. Verwendung von Box-Shadow

1. Schatten können auch auftreten, wenn der horizontale und vertikale Versatz 0 beträgt

Wenn der Offset-x- oder Offset-y-Wert 0 ist, liegt der Schatten hinter dem Element. In diesem Fall kann durch die Angabe eines Unschärferadius- oder Ausbreitungswerts ein Schatteneffekt erzeugt werden.

Beispiel:

Das erste Div erstellt einen Schatteneffekt, indem der Unschärferadius festgelegt wird.

Das zweite Div erzeugt einen Schatteneffekt, indem ein positiver Spread-Wert festgelegt wird.

Das dritte Div erzeugt einen Schatteneffekt, indem die Ausbreitung auf einen negativen Wert gesetzt wird.

Dabei ist jedoch eines zu beachten: Erweiterte Schatten müssen in Verbindung mit dem Schattenunschärferadius verwendet werden.

Persönlich glaube ich nicht, dass man sie zusammen verwenden kann, aber es ist unmöglich, nur den erweiterten Schatten einzustellen, da die Werte des erweiterten Schattens und der Schattenunschärfe beide positiv sein können. Wenn nur der erweiterte Schatten verwendet wird, wird er vom Browser als unscharfer Schatten interpretiert, sodass er einfach als „erweiterter Schatten muss in Verbindung mit dem Schattenunschärferadius verwendet werden“ verstanden werden kann. Wenn nur der erweiterte Schatten verwendet wird, kann er wie folgt geschrieben werden: box-shadow:0 0 0 1px;.

<Stil>
      div{
            Breite: 100px;
            Höhe: 100px;
            Rand: 50px;
            Rand: 10px gepunktet rot;
            Anzeige: Inline-Block;
    }
    .verwischen{
            Kastenschatten: 0 0 20px;
            /*box-shadow: 0 0 20px green;*/ /*Sie können die Farbe auch anpassen*/
    }  
    .spread-positiv{
            Kastenschatten: 0 0 20px 5px;
            /* box-shadow: 0 0 20px 5px green;*/ /*Sie können die Farbe auch anpassen*/
    }
    .spread-negative{
            Kastenschatten: 0 0 20px -5px;
            /* box-shadow: 0 0 20px -5px green;*/ /*Sie können die Farbe auch anpassen*/
    }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Unschärfe"></div>
    <div Klasse = "spread-positive"></div>
    <div Klasse = "spread-negative"></div>
</body> 

2. Stellen Sie die horizontalen und vertikalen Offsets ein, um den Schatteneffekt zu erzielen

Ausgangsfall: Die horizontalen und vertikalen Offsets sind 0, aber Unschärfe und Ausbreitung sind nicht eingestellt, sodass der Schatten nicht sichtbar ist. Da der Umfang des Box-Schattens dem des Rahmen-Box entspricht, kann der Schatten durch Einstellen des Offsets angezeigt werden.

Eingefügter Fall: Der horizontale und vertikale Versatz beträgt 0, Unschärfe und Ausbreitung sind nicht festgelegt und der Schatten ist immer noch nicht sichtbar, da der Umfang des Box-Schattens dem der Füllbox entspricht und der Schatten auch durch Festlegen des Versatzes angezeigt werden kann.

Beispiel:

<style type="text/css">
div{
    Breite: 100px;
    Höhe: 100px;
    Rand: 50px;
    Rand: 10px gepunktetes Rosa;
    Anzeige: Inline-Block;
}
.shadow0{box-shadow: 0 0;}  
.shadow1{box-shadow: 1px 1px;}
.shadow10{box-shadow: 10px 10px;}
.inset-shadow0{box-shadow: 0 0 inset;}  
.inset-shadow1{box-shadow: 1px 1px inset;}
.inset-shadow10{box-shadow: 10px 10px inset;}
</Stil>
<Text>
    <div Klasse="shadow0"></div>
    <div Klasse="Schatten1"></div>
    <div Klasse="shadow10"></div>
    <div Klasse="inset-shadow0"></div>
    <div Klasse="inset-shadow1"></div>
    <div Klasse="inset-shadow10"></div>
</body> 

3. Projektionsmethode

Der Standardprojektionsmodus ist Outset, was externe Projektion bedeutet. Sie können Inset so einstellen, dass es nach innen projiziert.

Beispiel: Das erste Div hat den Standardanfang, das zweite den Einzug, beim dritten sind beide Schatten so eingestellt, dass die Beziehung zwischen Anfang und Einzug besser dargestellt wird, und beim vierten Div ist der Einzugsschatten über dem Hintergrund und unter dem Inhalt.

<style type="text/css">
div{
    Breite: 100px;
    Höhe: 100px;
    Rand: 50px;
    Rand: 10px gepunktetes Rosa;
    Anzeige: Inline-Block;
    vertikale Ausrichtung: oben;
} 
.Anfang{
    Box-Schatten: 10px 10px blaugrün;
}
.Einsatz{
    Box-Shadow: 10px 10px blaugrüner Einschub;    
}
.doppelt{
    Box-Shadow: 10px 10px blaugrüner Einschub, 10px 10px blaugrün;
}
.bg{
    Hintergrundfarbe: gelb;
}
</Stil>
<Text>
    <div Klasse = "Ausgangspunkt"></div>
    <div Klasse="Einsatz"></div>
    <div Klasse="double"></div>
    <div class="inset bg">Schatten über dem Hintergrund und unter dem Inhalt einfügen</div>
</body> 

4. Wenn das Element auch die Eigenschaft „Border-Radius“ angibt, hat der Schatten die gleichen abgerundeten Ecken.

<style type="text/css">
 div{
 Breite: 100px;
    Höhe: 100px;
    Rand: 50px;
    Rand: 10px gepunktetes Rosa;
    Anzeige: Inline-Block;
    Rahmenradius: 50px;
 }
.Schatten{
    Box-Schatten: 0 0 10px 10px grün;
}
</Stil>
<Text>
<div Klasse="Schatten"></div>
</body> 

5. Klassische Beispiele

Ein Beispiel vom W3C. http://www.w3.org/TR/css3-background/#the-box-shadow

sichtbar:

• border-radius beeinflusst die Schattenform auf die gleiche Weise
• Rahmenbild, Polsterung hat keinen Einfluss auf die Form des Schattens
• Schattenbox ist dasselbe wie Boxmodell
• Der äußere Schatten liegt unter dem Hintergrund des Objekts und der innere Schatten liegt über dem Hintergrund.
• Hierarchie: Inhalt > Innerer Schatten > Hintergrundbild > Hintergrundfarbe > Äußerer Schatten

6. Mehrere Schatten

Dieser Effekt war oben zu sehen und jetzt werde ich weitere Inhalte hinzufügen.

Syntax: Sie können beliebig viele Schatten festlegen, durch Kommas getrennt.

Bei mehreren Schatten in einer Box ist auf die Reihenfolge zu achten: Mehrere Schatten werden von oben nach unten verteilt, wobei der erste Schatten oben ist.

Beispiel: Einseitiger Schatteneffekt

Lassen Sie mich zunächst erklären: Sie können den Schatten des linken Rands, den Schatten des rechten Rands, den Schatten des oberen Rands und den Schatten des unteren Rands separat einstellen. Tatsächlich ist es richtig, dies zu sagen, da der Effekt so aussieht, aber der grundlegende Grund ist, dass sich der Schatten hinter der Box befindet. Er ändert lediglich die Position des Schattens und die Schatten der anderen drei Seiten existieren weiterhin, sie werden lediglich verdeckt. Daher ist das Einstellen des Schattens einer bestimmten Seite eine sehr vage Sache. Leider hat mich diese Aussage im Internet zunächst immer noch verwirrt, daher habe ich hier gesagt, dass es sich um einen einseitigen Schatteneffekt handelt, um Ihnen zu sagen, dass es sich nur um einen Effekt handelt und es sich im Wesentlichen immer noch um eine Box handelt.

Beispielerklärung: Stellen Sie die oberen, rechten, unteren und linken Ränder des ersten Div jeweils auf die Farben Rot, Orange, Gelb und Grün ein. Dann befindet sich der rote Schatten auf der oberen Ebene und der grüne Schatten auf der unteren Ebene, wie in der linken Abbildung unten gezeigt.

Durch Hinzufügen eines Unschärferadius wird der Effekt deutlicher. Wie in der Abbildung unten gezeigt, wird der Unschärferadius des roten Schattens nicht beeinflusst, da er sich auf der obersten Ebene befindet. Der orangefarbene Schatten kommt als nächstes und wird vom Radius des roten Schattens beeinflusst. Der gelbe Schatten wird vom Radius des orangefarbenen und roten Schattens beeinflusst. Ebenso wird der grüne Schatten vom Radius aller darüber liegenden Schatten beeinflusst.

Wenn Sie es immer noch nicht verstehen, stellen Sie einen großen Radius für den roten Schatten ein, z. B. 50, und Sie werden einen sehr deutlichen Effekt sehen, wie in der Abbildung rechts unten gezeigt.

<style type="text/css">
div{
    Breite: 100px;
    Höhe: 100px;
    Rand: 50px;
    Anzeige: Inline-Block;
    Rand: 10px gepunktetes Rosa;
}
.Schatten{
    Box-Shadow: 0 -5px rot,
    5px 0 orange,
    0 5px gelb,
    -5px 0 grün;
}
.unschärfe-schatten{
    Box-Shadow: 0 -5px 5px rot,
    5px 0 5px orange,
    0 5px 5px gelb,
    -5px 0 5px grün;
}
.big-redShadow{
    Box-Shadow: 0 -5px 50px rot,
    5px 0 5px orange,
    0 5px 5px gelb,
    -5px 0 5px grün;
}
</Stil>
<Text>
    <div Klasse="Schatten"></div>
    <div Klasse="blur-shadow"></div>
    <div Klasse="big-redShadow"></div>
</body> 

7. Schatten und Layout

Schatten haben keinen Einfluss auf das Layout, können aber andere Boxen verdecken oder Schatten anderer Boxen werfen.

Der Schatten löst keine Bildlaufleisten aus und vergrößert den Bildlaufbereich nicht.

Schatten können beim Layouten daher ignoriert werden.

8. Spread verwenden

Verwenden Sie die Ausbreitung, um die Grenze zu simulieren

<style type="text/css">
div{
    Breite: 100px;
    Höhe: 100px;
    Anzeige: Inline-Block;
    Rand: 10px;
    vertikale Ausrichtung: oben;
}
.Grenze{
    Rand: 1px durchgehend rot;
}
.verbreiten{
    Box-Schatten: 0 0 0 1px rot;
}
.muli-border{
    Box-Shadow: 0 0 0 2px rot, 0 0 0 4px grün, 0 0 0 6px blau;
}
</Stil>
<Text>
    <div class="border">Rand</div>
    <div Klasse = "Spread">Boxschatten</div>
    <div class="muli-border">Mehrere<br/>Boxschatten</div> 

Verwenden von Spread zur Implementierung zweifarbiger eckiger Klammern

<style type="text/css">
.Dekorator {
Breite: 300px;
Höhe: 100px;
Polsterung: 30px;
Box-Schatten: -30px -30px 0 -25px rot, 30px 30px 0 -25px grün; 
}
</Stil>
<Text>
<div class="decorator">Absatzinhalt: Verwenden Sie Box-Shadow, um zweifarbige eckige Klammern zu simulieren. Box-Shadow: -24px -24px 0 -20px rot, 24px 24px 0 -20px grün; </div>
</body> 

Zusammenfassen

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der CSS3-Box-Shadow-Eigenschaft. Weitere relevante Inhalte zur CSS3-Box-Shadow-Eigenschaft 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!