Heim >Web-Frontend >CSS-Tutorial >Wie verwende ich Box-Shadow in CSS3, um einen Randschatten zu erstellen? (Code-Tutorial)
Wie verwende ich Box-Shadow in CSS3, um einen Randschatten zu erstellen? (Code-Tutorial)
- 云罗郡主nach vorne
- 2018-10-23 16:59:352552Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Verwendung von Box-Shadow in CSS3 zum Erstellen von Rahmenschatten. (Code-Tutorial) hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.
Einführung in das Box-Shadow-Attribut
Randschatten ist ein sehr häufiger Spezialeffekt.
Wenn Sie bisher in CSS2.1 einem Element einen Randschatten hinzufügen wollten (wie im Bild oben), konnten Sie dies nur über ein Hintergrundbild tun.
In CSS3 können wir mithilfe der Box-Shadow-Eigenschaft ganz einfach Schatteneffekte zu Elementen hinzufügen.
Syntax:
box-shadow：x-shadow y-shadow blur spread color inset;
Beschreibung:
(1) x-shadow: Legen Sie die Position des horizontalen Schattens (X-Achse) fest. Negative Werte können verwendet werden.
(2) y-Schatten: Legen Sie die Position des vertikalen Schattens (y-Achse) fest, Sie können negative Werte verwenden
(3) Unschärfe: Legen Sie den Schattenunschärferadius fest
(4) Ausbreitung: Erweitern Sie den Radius und legen Sie die Größe des Schattens fest. (5) Farbe: Legen Sie die Farbe des Schattens fest. Dieser Parameter ist standardmäßig nicht festgelegt. Der Standardwert ist äußerer Schatten, Einschub bedeutet innerer Schatten. Beispiel:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:5px 5px 8px red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>Der Vorschaueffekt im Browser ist wie folgt:
Horizontale Schattenposition x-Schatten und vertikale Schattenposition y-Schatten
Der Attributwert der horizontalen Schattenposition x-Schatten und der vertikalen Schattenposition y-Schatten. Die Einheit kann px, em oder Prozentsatz usw. sein. Negative Werte sind erlaubt.
Beispiel:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:-5px -5px 8px red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>Der Vorschaueffekt im Browser ist wie folgt:
Oben wird beschrieben, wie Sie Box-Shadow in CSS3 zum Erstellen verwenden Grenzschatten? (Code-Tutorial) Vollständige Einführung. Wenn Sie mehr über das 
erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie verwende ich Box-Shadow in CSS3, um einen Randschatten zu erstellen? (Code-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!