Wie wir alle wissen, stellt uns CSS eine breite Palette von Eigenschaften und Pseudoklassen zur Verfügung, die es Entwicklern ermöglichen, Elementen gewünschte Stile hinzuzufügen. Eine dieser Eigenschaften ist die box-shadow-Eigenschaft; sie ermöglicht es uns, einen schattenähnlichen Effekt um ein Element herum hinzuzufügen.
Box Shadow ist eine CSS-Eigenschaft, die verwendet wird, um einen äußeren oder inneren Schatteneffekt auf einem Element zu erzeugen. Es wendet einen oder mehrere Schatten auf ein Element an, die jeweils durch einen X- und Y-Versatz vom Element, einen Unschärferadius, einen Streuradius, eine Farbe und einen Deckkraftwert angegeben werden.
Die Box-Shadow-Eigenschaft kann mehrere durch Kommas getrennte Werte akzeptieren; jeder Wert definiert einen Schatteneffekt. Ein Kastenschatten ohne Versatz lässt ihn wie eine flache Form aussehen, genau wie beim Drucken auf Papier.
Angenommen, dass das Element, auf das wir Box-Shadow anwenden, eine Art Randradius angibt, hat der Box-Shadow-Effekt auch einen gekrümmten Rand wie dieses Element. Mehrere Boxschatten werden auf der Z-Achse in derselben Reihenfolge angeordnet wie mehrere Textschatten.
Mit -
können wir einem Element einen Boxschatten zuweisenZwei Werte – Immer wenn wir die Box-Shadow-Eigenschaft mit zwei Werten verwenden, werden diese als Werte für den X- und Y-Versatz verwendet.
Drei Werte – Die ersten beiden Werte fungieren als X- und Y-Versatzwerte, während der dritte Wert für den Unschärferadiuseffekt verwendet wird.
Vier Werte – Der vierte Wert wird als Wert des Diffusionsradius betrachtet, die restlichen Werte sind die Werte des X-Versatzes, des Y-Versatzes bzw. des Unschärferadius.
Inset – Es handelt sich um einen optionalen Wert, dessen Vorhandensein den Schatten des Rahmens auf eine Seite verlagert. Wenn wir dies nicht angeben, erscheint der Schatten wie ein Schlagschatten nach oben
Color – Dies ist ein weiterer optionaler Wert, der die Farbe des Schattens festlegt. Wenn nicht angegeben, wird als Farbe standardmäßig die aktuelle Farbe des Elements verwendet.
Der Anfangswert ist „none“ und gilt für alle Elemente. Der Animationstyp der Schattenliste kann für Animationen verwendet werden, er wird jedoch nicht vererbt.
Im Folgenden finden Sie ein Beispiel für die Verwendung der Box-Shadow-Eigenschaft in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Shadow</title>
<style>
blockquote {
padding: 20px;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<blockquote>
<q>
This is an example of box shadow effect on elements <br />
Another temporary line for extra text
</q>
<p>— Example of Box Shadow</p>
</blockquote>
</body>
</html>
Da wir nun die Box-Shadow-Eigenschaft verstanden haben, schauen wir uns an, was „Webkit“ in CSS ist und warum wir es brauchen. Später werden wir die Webkit-Box Shadow besprechen.
Webkit ist Apples Webbrowser-Engine und wird von fast allen macOS-Anwendungen verwendet. Es gibt viele andere Webbrowser-Engines, wie Gecko für Firefox, Blink für Edge und viele mehr. Es stellt sich also die Frage, warum wir sie brauchen.
Das Präfix -webkit in CSS-Selektoren gibt Eigenschaften an, die nur von dieser Engine verarbeitet werden, ähnlich dem Attribut -moz. Indem wir dies angeben, weisen wir den Browser im Grunde an, es nur zu verwenden, wenn eine bestimmte Browser-Engine verwendet wird, andernfalls lassen Sie es unverändert. Die Verwendung ist umständlich. Deshalb möchten viele Entwickler, dass es so schnell wie möglich eingestellt wird.
Wie die Box-Shadow-Eigenschaft fügt auch die Webkit-Box-Shadow-Eigenschaft dem Rahmen des Elements, auf das sie angewendet wird, einen schattenähnlichen Effekt hinzu. Es ist jedoch wichtig zu beachten, dass die Implementierung spezifisch für Browser wie Chrome oder Apple Safari ist.
Mögliche Werte, die dieser Eigenschaft zugewiesen werden können, sind -
X-Offset – Gibt den horizontalen Versatz oder Abstand zum Element an.
Y-Versatz – Dies gibt ebenfalls einen Versatz oder Abstand an, jedoch in vertikaler Richtung
Unschärfe – Es handelt sich um einen Längenwert. Wenn er groß ist, ist der erzeugte Unschärfeeffekt groß, sodass der Schatteneffekt größer ist und umgekehrt.
Im Folgenden finden Sie ein Beispiel für die Verwendung von Web Kit-Box-Shadow in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.BoxShadow {
color: blue;
border: solid 1px blue;
margin: 1.5rem 3rem;
-webkit-box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>
<div class="BoxShadow">
<h1>Sample text</h1>
<p>Some more random text</p>
</div>
</body>
</html>
Da wir nun diese beiden Eigenschaften verstanden haben, wollen wir die Unterschiede zwischen ihnen auflisten.
Die Box-Shadow-Eigenschaft ist universell implementiert, wohingegen „webkitbox-shadow“ nur in Browsern funktioniert, die eine bestimmte Webbrowser-Engine verwenden, z. B. Safari oder Google Chrome.
Mit der Box Shadow-Eigenschaft können wir den Schatteneffekt in allen neueren Versionen formatieren. Wenn wir jedoch mit älteren Browserversionen arbeiten müssen, müssen wir webkit-box-shadow verwenden.
Zusammenfassend besteht der Hauptunterschied zwischen -webkit-box-shadow und box-shadow in CSS darin, dass -webkit-box-shadow das Herstellerpräfix für die von Webkit-Browsern eingeführte Box-Shadow-Eigenschaft ist. Mit der Box-Shadow-Eigenschaft können Sie einen Schlagschatteneffekt auf ein Element anwenden, ohne ein Bild oder eine andere externe Ressource zu verwenden. Das Attribut -webkit-box-shadow ist veraltet und wurde durch die Standard-Box-Shadow-Syntax ersetzt. Weil die meisten modernen Browser es unterstützen. Zusammenfassend lässt sich sagen, dass beide Eigenschaften zum Erstellen von Schatten auf Elementen verwendet werden, es sollte jedoch nur eine davon verwendet werden, da die andere mit der Zeit veraltet sein wird.
Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen -webkit-box-shadow und box-shadow in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
