Heim >Web-Frontend >CSS-Tutorial >So legen Sie einen Div-Schatten in CSS fest
In CSS können Sie das Box-Shadow-Attribut verwenden, um einen Div-Schatten festzulegen. Sie müssen dem Div-Element nur den Stil „Box-Shadow: horizontaler Schattenwert, vertikaler Schattenwert, Unschärfeabstand, Schattenfarbe“ hinzufügen ; wobei der Wert „inset“ weggelassen werden kann. Er legt den inneren Schatten fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
css set divshadow
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>
Rendering:
Beschreibung:
box-shadow-Eigenschaft kann eine oder mehrere Dropdown-Schattenboxen festlegen.
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
Hinweis: Die boxShadow-Eigenschaft fügt der Box einen oder mehrere Dropdown-Schatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und ein optionales Einfügungsschlüsselwort angegeben werden. Der Wert für die ausgelassene Länge ist 0.
Wert | Beschreibung |
---|---|
h-shadow | Erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt |
v-shadow | Erforderlich. Die Position des vertikalen Schattens. Negative Werte erlaubt |
Unschärfe | Optional. Unschärfeabstand |
Spreizung | optional. Die Größe des Schattens |
Farbe | ist optional. Die Farbe des Schattens. |
Einsatz | optional. Ändern Sie den Schatten vom äußeren Schatten in den inneren Schatten (am Anfang) |
Teilen von Lernvideos: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie einen Div-Schatten in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!