Welche Schattenattribute sind in CSS3 implementiert?-Front-End-Fragen und Antworten-php.cn

Welche Schattenattribute sind in CSS3 implementiert?

青灯夜游

Freigeben： 2022-02-25 18:20:46

Original

13873 Leute haben es durchsucht

Die in CSS3 implementierten Schattenattribute sind: 1. Textschattenattribut, das einen Textschatteneffekt erzielen kann; 2. Boxschattenattribut, das einen Randschatteneffekt erzielen kann; 3. Filterattribut, das zusammen mit verwendet werden muss Mit der Funktion drop-shadow() können Sie einen Schatteneffekt auf dem Bild festlegen.

Welche Schattenattribute sind in CSS3 implementiert?

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

css3 implementiert Schattenattribute

1. Textschatteneffekt wird verwendet. Mit dem Textschattenattribut können Sie die Pixellänge, -breite und die Unschärfe festlegen Abstände und Schattenfarben.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

Nach dem Login kopieren

Welche Schattenattribute sind in CSS3 implementiert? 2. Box-Shadow-Attribut – um einen Randschatteneffekt zu erzielen.

Box-Shadow-Attribut kann Schatten auf das Textfeld anwenden und auch die Pixellänge, -breite und den Unschärfeabstand des Schattens festlegen als Schattenfarbe.

box-shadow kann Schatten zu Elementen hinzufügen und unterstützt das Hinzufügen eines oder mehrerer Elemente.

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

Nach dem Login kopieren

Parameter:

Hinweis: Einfügung kann im ersten oder letzten Parameter geschrieben werden, andere Positionen sind ungültig. Welche Schattenattribute sind in CSS3 implementiert?

Schattenunschärferadius:

Dieser Parameter kann nur positiv sein. Wenn der Wert 0 ist, bedeutet dies, dass der Schatten keinen Unschärfeeffekt hat.

CSS-Code:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

Nach dem Login kopieren

Effekt:

Schattenerweiterungsradius: Welche Schattenattribute sind in CSS3 implementiert?

Dieser Parameter ist optional, der Wert kann positiv oder negativ sein. Wenn der Wert positiv ist, wird der gesamte Schatten erweitert, andernfalls wird der gesamte Schatten erweitert Der Wert ist: Wenn der Wert negativ ist, wird er reduziert.

CSS-Code:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

Nach dem Login kopieren

Wirkung:

Welche Schattenattribute sind in CSS3 implementiert?

X-Achsen-Versatz- und Y-Achsen-Versatzwerte können auf negative Zahlen eingestellt werden

X-Achsen-Versatz ist negativ:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

Nach dem Login kopieren

Effekt:

Y-Achsen-Versatz ist negativ: Welche Schattenattribute sind in CSS3 implementiert?

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

Nach dem Login kopieren

Effekt:

Äußerer Schatten: Welche Schattenattribute sind in CSS3 implementiert?

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

Nach dem Login kopieren

Effekt:

Innerer Schatten:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

Nach dem Login kopieren

Effekt:

Mehrere Schatten hinzufügen:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

Nach dem Login kopieren

Effekt:

Welche Schattenattribute sind in CSS3 implementiert? 3. Filterattribut

Das Filterattribut definiert den visuellen Effekt des Elements (normalerweise ), wenn es mit dem Schlagschatten() kombiniert wird. Funktion Wird zusammen verwendet, um einen Schatteneffekt auf einem Bild festzulegen.

filter:drop-shadow(h-shadow v-shadow blur spread color);

Nach dem Login kopieren

Ein Schatten ist eine versetzte Version einer Maske, die unter dem Bild zusammengesetzt wird, Unschärfe aufweisen und in einer bestimmten Farbe gemalt werden kann. Die Funktion akzeptiert Werte vom Typ (im CSS3-Kontext definiert), mit der Ausnahme, dass das Schlüsselwort „inset“ nicht zulässig ist. Diese Funktion ist der vorhandenen Box-Shadow-Eigenschaft sehr ähnlich; der Unterschied besteht darin, dass einige Browser über Filter eine Hardwarebeschleunigung für eine bessere Leistung bereitstellen. Die Parameter lauten wie folgt:

h-shadow v-shadow (erforderlich)

Dies sind die beiden -Werte, die den Schattenversatz festlegen. Legen Sie den horizontalen Abstand fest. Negative Werte bewirken, dass der Schatten links vom Element erscheint. Schauen Sie sich die möglichen Einheiten für an.
Wenn beide Werte 0 sind, erscheint der Schatten direkt hinter dem Element (wenn und/oder eingestellt ist, Es wird einen Unschärfeeffekt geben.
Werden größer und unschärfer. Negative Werte sind nicht zulässig. Der Standardwert ist 0 (der Rand des Schattens ist sehr scharf).
Dies ist der vierte -Wert. Positive Werte bewirken, dass der Schatten größer wird, wenn er nicht festgelegt wird, ist der Standardwert 0
Hinweis: Webkit und einige andere Browser tun dies nicht. Die vierte Länge wird unterstützt und wird nicht gerendert, wenn sie hinzugefügt wird.
(optional)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

Nach dem Login kopieren

Welche Schattenattribute sind in CSS3 implementiert?

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonWelche Schattenattribute sind in CSS3 implementiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!