Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie einen Schatteneffekt in CSS
So erzielen Sie einen Schatteneffekt in CSS
- 青灯夜游Original
- 2021-04-13 18:37:2323532Durchsuche
Methode: 1. Verwenden Sie das Textschatten-Attribut, Syntax „text-shadow: horizontaler Schatten, vertikale Schattenunschärfe-Abstandsfarbe;“ 2. Verwenden Sie das Box-Shadow-Attribut, Syntax „Box-Shadow: horizontaler Schatten, vertikaler Schatten-Unschärfeabstand, Schattengröße“. Farbeinsatz;".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie das Attribut „text-shadow“
Das Attribut text-shadow wird verwendet, um den Text mit Schatten zu versehen; Sie können die Pixellänge, die Breite und den Unschärfeabstand des Schattens festlegen sowie die Farbe des Schattens. text-shadow属性用于设置带阴影的文本；可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
语法：
text-shadow: h-shadow v-shadow blur color;
属性值：
h-shadow：设置水平阴影的位置，允许负值。
v-shadow：设置垂直阴影的位置，允许负值。
blur：设置模糊的距离。
color：设置阴影的颜色。
示例：
<!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属性
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;Eigenschaftswerte:
- h-shadow: Legt die Position des horizontalen Schattens fest, negative Werte sind zulässig.
- V-Schatten: Legen Sie die Position des vertikalen Schattens fest. Negative Werte sind zulässig.
- Unschärfe: Stellen Sie den Unschärfeabstand ein.
- Farbe: Legen Sie die Farbe des Schattens fest.
- Beispiel:
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css设置阴影效果</title> <style> .demo{ width: 400px; height: 300px; margin: 50px auto; } .demo img{ box-shadow: 10px 10px 10px rgba(0,0,0,.5); /*考虑浏览器兼容性*/ -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5); } </style> </head> <body> <div class="demo"> <img src="img/1.jpg"/ alt="So erzielen Sie einen Schatteneffekt in CSS" > </div> </body> </html>
Methode 2: Verwenden Sie das Box-Shadow-Attribut
box-shadow-Attribut, um Schatten auf das Textfeld anzuwenden. Sie können die Pixellänge, -breite und -unschärfe festlegen der Schattenabstand und die Farbe des Schattens. Syntax: rrreee
Attributwert:
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Schatteneffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!