Heim >Web-Frontend >CSS-Tutorial >Wie schreibe ich CSS-Schatten?
Wie schreibe ich CSS-Schatten?
- 青灯夜游Original
- 2021-07-15 17:15:439273Durchsuche
So schreiben Sie Schatten: 1. Textschatten „Textschatten: H-Schatten-V-Schatten-Unschärfefarbe“;
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. So schreiben Sie CSS-Textschatten
In CSS können Sie das Textschattenattribut verwenden, um Schattentext zu implementieren.
Syntax
text-shadow: h-shadow v-shadow blur color;
| Wert | Beschreibung |
|---|---|
| h-shadow | Erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt. |
| v-shadow | Erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt. |
| Unschärfe | optional. Verschwommene Distanz. |
| Farbe | optional. Die Farbe des Schattens. |
Hinweis: Die Eigenschaft text-shadow verbindet einen oder mehrere Schattentexte. Das Attribut ist ein Schatten, der alle 2 oder 3 Längenwerte und einen optionalen, durch Kommas getrennten Farbwert angibt. Die abgelaufene Länge beträgt 0.
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>Rendering:
2. So schreiben Sie CSS-Randschatten
In CSS können Sie das Box-Shadow-Attribut verwenden, um den Box-Shadow-Effekt zu erzielen Das Attribut kann ein oder mehrere Felder mit Schlagschatten festlegen.
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
| Wert | Beschreibung |
|---|---|
| h-shadow | Erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt |
| v-shadow | Erforderlich. Die Position des vertikalen Schattens. Negative Werte erlaubt |
| Unschärfe | Optional. Unschärfeabstand |
| Spreizung | optional. Die Größe des Schattens |
| Farbe | ist optional. Die Farbe des Schattens. |
| Einsatz | optional. Ändern Sie den Schatten vom äußeren Schatten in den inneren Schatten (zunächst) |
Hinweis: Die boxShadow-Eigenschaft fügt der Box einen oder mehrere Schlagschatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und ein optionales Einfügungsschlüsselwort angegeben werden. Der Wert für die ausgelassene Länge ist 0.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: #ff9900;
-moz-box-shadow: 10px 10px 5px #888888;
/* 老的 Firefox */
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 vonWie schreibe ich CSS-Schatten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!