Wie schreibe ich CSS-Schatten?-CSS-Tutorial-php.cn

Wie schreibe ich CSS-Schatten?

青灯夜游

Freigeben： 2023-01-07 11:43:40

Original

9283 Leute haben es durchsucht

So schreiben Sie Schatten: 1. Textschatten „Textschatten: H-Schatten-V-Schatten-Unschärfefarbe“;

Wie schreibe ich CSS-Schatten?

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

Wie schreibe ich CSS-Schatten?

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

Wie schreibe ich CSS-Schatten?

(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!