Heim >Web-Frontend >CSS-Tutorial >Welche Funktion hat das Box-Shadow-Attribut?
Welche Funktion hat das Box-Shadow-Attribut?
- 青灯夜游Original
- 2019-01-30 13:27:287628Durchsuche
box-shadow ist eine Eigenschaft in CSS3, die verwendet wird, um der Box einen oder mehrere Schatten hinzuzufügen und die Position, Größe, Farbe usw. des Schattens festzulegen.
CSS3-Box-Shadow-Eigenschaft
Funktion: Box-Shadow ist Wird verwendet, um einem Feld einen Schatten hinzuzufügen
Grundlegende Syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
Parameter:
h-shadow: Position von horizontaler Schatten. Negative Werte sind erlaubt.
V-Schatten: Die Position des vertikalen Schattens. Negative Werte sind erlaubt.
Unschärfe: Unschärfeabstand, kann weggelassen werden.
Spread: Die Größe des Schattens kann weggelassen werden.
Farbe: Die Farbe des Schattens, kann weggelassen werden.
Einsatz: Ändern Sie den äußeren Schatten (Anfang) in einen inneren Schatten, der weggelassen werden kann.
Beschreibung: box-shadow fügt der Box 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.
Beispiel für die Verwendung des CSS3-Box-Shadow-Attributs
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonWelche Funktion hat das Box-Shadow-Attribut?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!