Heim > Artikel > Web-Frontend > So erzielen Sie einen Schatteneffekt in CSS
So erzielen Sie einen Schatteneffekt in CSS
- 青灯夜游Original
- 2021-04-29 17:46:3426404Durchsuche
So erzielen Sie einen Schatteneffekt in CSS: 1. Verwenden Sie das Attribut „text-shadow“, um schattierten Text festzulegen, um einen Textschatteneffekt zu erzielen. 2. Verwenden Sie das Attribut „box-shadow“, um Schatten auf das Textfeld anzuwenden, um einen Randschatteneffekt zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie das Textschatten-Attribut, um einen Textschatteneffekt zu erzielen.
Das Textschatten-Attribut wird verwendet, um den Text mit Schatten zu versehen. Sie können auch die Pixellänge, die Breite und den Unschärfeabstand des Schattens festlegen als die Farbe des Schattens.
Beispiel:
<!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>
Methode 2: Verwenden Sie das Box-Shadow-Attribut, um den Randschatteneffekt zu erzielen
Das Box-Shadow-Attribut kann einen Schatten auf das Textfeld anwenden und die Pixellänge festlegen. Breite und Unschärfe des mittleren Schattenabstands sowie die Farbe des Schattens.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置边框阴影效果</title>
<style>
div{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影！</div>
</body>
</html>Rendering:
(Lernvideo-Sharing: CSS-Video-Tutorial)
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!