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.
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>
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轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;
Hinweis: Einfügung kann im ersten oder letzten Parameter geschrieben werden, andere Positionen sind ungültig. 
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:4px 4px 15px #666;
}Schattenerweiterungsradius: 
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:4px 4px 15px -3px #666;
}
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:-5px 5px 5px #666;
}Y-Achsen-Versatz ist negativ: 
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px -5px 5px #666;
}Äußerer Schatten: 
#box{
width:50px;
height:50px;
background:green;
box-shadow:5px 4px 10px #666;
}Innerer Schatten: 
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset;
}
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;
}
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);
查看
<!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>
（学习视频分享：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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
