Heim  >  Artikel  >  Web-Frontend  >  CSS3-Tutorial-Box-Shadow-Eigenschaft

CSS3-Tutorial-Box-Shadow-Eigenschaft

黄舟
黄舟Original
2016-12-27 16:08:421808Durchsuche

Hallo! Liebe Frontend-Entwickler, freuen Sie sich nach der Lektüre des CSS3-Tutorials – dem ersten Attribut des Rahmens – auf dessen zweites Attribut, Box-Shadow? Machen Sie sich keine Sorgen, das Front-End-Entwicklungsnetzwerk wird es Ihnen nach und nach vorstellen.

Schauen wir uns zunächst ein Beispiel an:

Box-Shadow zu einem div-Element hinzufügen:

div
{
box-shadow: 10px 10px 5px #888888;
}

Browserunterstützung:

CSS3-Tutorial-Box-Shadow-Eigenschaft

IE9+, Firefox 4, Chrome, Opera und Safari 5.1.1 unterstützen das Box-Shadow-Attribut.

Definition und Verwendung:

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

Tipp: Verwenden Sie border-image-*-Eigenschaften, um schöne skalierbare Schaltflächen zu erstellen!

CSS3-Tutorial-Box-Shadow-Eigenschaft

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

Kommentare: box-shadow Fügt einem Feld einen oder mehrere Schatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und das optionale Schlüsselwort „inset“ angegeben werden. Der Wert für die ausgelassene Länge ist 0.

CSS3-Tutorial-Box-Shadow-Eigenschaft

Das Obige ist der Inhalt des CSS3-Tutorial-Box-Shadow-Attributs. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn