Heim > Artikel > Web-Frontend > In CSS3 gibt es mehrere Kategorien von Schatten

In CSS3 gibt es mehrere Kategorien von Schatten

青灯夜游Original: 2022-03-18 17:51:552649Durchsuche

Schatten sind in CSS3 in zwei Kategorien unterteilt: 1. Textschatten, legen Sie die Syntax „Textschatten: horizontale Position, vertikale Position, Unschärfeabstandsfarbe“ fest; 2. Boxschatten, legen Sie die Syntax „Boxschatten: horizontale Position vertikal“ fest Position, Unschärfe, Abstand, Ausbreitung, Farbeinsatz;".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS3 gibt es zwei Arten von Schatten: Textschatten und Boxschatten. Diese beiden Eigenschaften können den Schatteneffekt erzielen, ohne ein Hintergrundbild hinzuzufügen, und bieten eine große Hilfe bei der praktischen Verschönerung von Webseiten. Wie werden diese beiden Attribute verwendet?

1. text-shadow

Die Syntaxspezifikation dieses Attributs lautet text-shadow: 1px 1px 1px #666;

Bevor wir über das CSS-Shadow-Attribut sprechen, wollen wir zunächst den gesunden Menschenverstand über Schatten verstehen .

Schatten entstehen, wenn Licht auf ein Objekt fällt, was in von hinten beleuchteten Bereichen Schatten erzeugt.

Wie unten gezeigt, ist es der Schatten, der von rechts und unten erzeugt wird:

In CSS3 gibt es mehrere Kategorien von Schatten

Das Bild unten ist der Schatten, der von oben und links erzeugt wird.

In CSS3 gibt es mehrere Kategorien von Schatten

Schauen wir uns das Textschattenattribut an. Das Attribut umfasst vier Der erste Wert ist der horizontale Versatz des Schattens, der zweite Wert stellt den vertikalen Versatz dar, der dritte Wert stellt den Schattendivergenzbereich dar und der vierte Wert stellt die Schattenfarbe dar.

Erstens verwenden die Schatten rechts und unten standardmäßig positive Werte und die Schatten links und oben negative Werte.

text-shadow: 1px 1px 1px #666; bedeutet einen um ein Pixel nach rechts und unten verschobenen Schatten, text-shadow: -1px -1px 1px #666; bedeutet einen nach links und nach oben verschobenen Schatten. text-shadow: 0px 0px 1px #666; zu diesem Zeitpunkt gibt es überall gleiche Schatten, wie unten gezeigt

In CSS3 gibt es mehrere Kategorien von Schatten

2. Mehrere Sätze von Attributwerten können durch Kommas getrennt werden

text-shadow: 1px 1px 1px #666, -1px -1px 1px #666; bedeutet, dass rundherum ein Schatten um ein Pixel versetzt ist.

Mit dem Textschatten-Attribut können wir exquisite geprägte Texteffekte erstellen.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #cccccc;
        }
        p{
            text-align: center;
            font-size: 60px;
            margin-top: 50px;
            font-weight: bold;
            color: #cccccc;
        }
        .tu{
            text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
        }
        .ao{
            text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
        }
    </style>
</head>
<body>
        <p>好好学习</p>
        <p>天天向上</p>
</body>
</html>

läuft wie folgt:

In CSS3 gibt es mehrere Kategorien von Schatten

2. box-shadow

box-shadow ist dem Textschatten sehr ähnlich. Einer dient zum Schattieren des Textes, der andere zum Schattieren Container. Die sechs Werte von

box-shadow sind wie folgt:

h-shadow Die Position des horizontalen Schattens, der Wert kann eine negative Zahl sein (kann nicht weggelassen werden)
v-shadow Die Position des vertikalen Schattens, der Wert kann eine negative Zahl sein (kann nicht weggelassen werden). Weggelassen)
Unschärfe-Unschärfeabstand (optional)
Spreizschattenabstand (optional)
Farbschattenfarbe (optional). )
inset Ändert den äußeren Schatten (Anfang) in einen inneren Schatten (optional)

none Standardwert (box-shadow:none kann den Schatteneffekt des Rahmens aufheben)

Hinweis: Ein oder mehrere Schatten können der Box hinzugefügt werden. Dieses Attribut ist eine durch Kommas getrennte Liste von Schatten. Jeder Schatten wird durch (2–4) Längenwerte, einen optionalen Farbwert und das optionale Schlüsselwort inset angegeben. Der Wert für die ausgelassene Länge ist 0.

Beispiel: Mehrere Schattenstile hinzufügen

Das obige ist der detaillierte Inhalt vonIn CSS3 gibt es mehrere Kategorien von Schatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche CSS3-Eigenschaften unterstützt ie9?Nächster Artikel：Welche CSS3-Eigenschaften unterstützt ie9?

In Verbindung stehende Artikel

Mehr sehen