CSS3 Schatten (Shadows)

CSS3, können Sie Schatten auf Elemente anwenden.

CSS3Schatten

CSS3Ermöglicht es Ihnen, Schatteneffekte wie in Photoshop hinzuzufügen, ohne dass irgendwelche Bilder verwendet werden müssen. In CSS3Bisher wurden Sektionsbilder verwendet, um Schatten um lästige Elemente zu erstellen.

Das nächste Kapitel wird die Anwendung von Schatten auf Text und Elementen erläutern.

CSS3 box-Schattenattribut

box-Das Schattenattribut kann verwendet werden, um Schatten in das Rahmen des Elements hinzuzufügen. Sie können auch mehrere Schatten durch Kommas getrennt anwenden. Die grundlegende Syntax für die Erstellung von Boxenschatten kann wie folgt gegeben werden:

box-shadow: offset-x offset-y blur-radius Farbe;

Dieser box-Die Komponenten des Schattenattributs haben die folgenden Bedeutungen:

• offset-x —Setzen Sie die horizontale Verschiebung des Schattens.

• offset-y —Setzen Sie die vertikale Verschiebung des Schattens.

• blur-radius —Setzen Sie den Verzerrungsradius. Der Wert ist越大，模糊越大，阴影的边缘越模糊。Nicht negativer Wert erlaubt.

• color —Setzen Sie die Farbe des Schattens. Wenn das Farbwert übersehen oder nicht angegeben wird, wird es die Standardfarbe übernommen.colorWert der Eigenschaft.

Bitte beziehen Sie sich auf CSS3 box-Schattenattribut, um mehr über andere mögliche Werte zu erfahren.

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background: #ccc;
　　　　box-shadow:　5px　5px　10px #999;
}

Gleichzeitig können Sie eine Liste mit durch Kommas getrennten Boxen hinzufügen, um mehrere Boxenschatten hinzuzufügen:

.box{
　　　　width:　200px;
　　　　height:　150px;
　　　　background: #000;
　　　　box-shadow:　5px　5px　10px red,　10px　10px　20px yellow;
}

CSS3 text-Schattenattribut

Sie können mit text-Der Schattenattribut kann Schatten auf Text anwenden. Sie können auch mit box-Die gleiche Schattennotation kann mehrere Schatten auf Text anwenden.

h1　{
　　　　text-shadow:　5px　5px　10px #666;
}
h2　{
　　　　text-shadow:　5px　5px　10px red,　10px　10px　20px yellow;
}