So verwenden Sie CSS3-Textschatten-Schriftschatten-CSS-Tutorial-php.cn

So verwenden Sie CSS3-Textschatten-Schriftschatten

php中世界最好的语言

Freigeben： 2017-11-24 09:27:30

Original

2242 Leute haben es durchsucht

Der Textschatten-Stil von CSS3 besteht darin, den Textschatteneffekt festzulegen. Ursprünglich gab es dieses -Attribut in CSS3, also machen wir es Schauen Sie sich an, wie Textschatten verwendet werden muss.

CSS3-Wörter:

text-shadow

Grammatikstruktur

div{text-shadow:5px 2px 6px #000;}

Stellen Sie den Textschatteneffekt im Div-Feld so ein, dass der Schatteneffekt 5 Pixel von links und 2 Pixel von oben angezeigt wird. Gleichzeitig beträgt der Schattengrößenbereich 6 Pixel und die Schattenfarbe ist Schwarz (#000).

Der Schatteneffekt der Textanzeige hat insgesamt 4 Werte. Der erste Wert stellt den Abstand von links zum Beginn der Anzeige des Schatteneffekts dar, der zweite Wert stellt den Abstand nach links zum Beginn der Anzeige dar Schatteneffekt, und der dritte Wert stellt die Größe des Schattenbereichs dar, der vierte Wert ist die Schatteneffektfarbe.

Fall-HTML-Code

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字体阴影 在线演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>我阴影文字</div> 
<div class="txt">文字阴影测试内容1</div> 
<div class="txt2">文字阴影测试内容2</div> 
</body> 
</html>

Nach dem Login kopieren

Entsprechender CSS-Code:

.txt {text-shadow:5px 1px 6px #F93 }  
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}

Nach dem Login kopieren

Das Obige beschreibt die Verwendung von Textschatten in CSS3. Für weitere spannende Informationen zahlen Sie bitte Achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Verwandte Lektüre:

So verbergen Sie den Inhalt von überlaufendem DIV

Welche Techniken gibt es für das CSS-Layout?

So legen Sie den Schriftstil in CSS fest

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Textschatten-Schriftschatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!