Heim > Artikel > Web-Frontend > 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:352397Durchsuche

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:

Wie verwende ich Box-Shadow in CSS3, um einen Randschatten zu erstellen? (Code-Tutorial) 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 Wie verwende ich Box-Shadow in CSS3, um einen Randschatten zu erstellen? (Code-Tutorial)

CSS3-Video-Tutorial

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:lvyestudy.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So stellen Sie sicher, dass Breite und Höhe des Bildes auf der Seite immer ein Verhältnis von 16:9 beibehaltenNächster Artikel：So stellen Sie sicher, dass Breite und Höhe des Bildes auf der Seite immer ein Verhältnis von 16:9 beibehalten

In Verbindung stehende Artikel

Mehr sehen