Heim > Artikel > Web-Frontend > So verwenden Sie CSS3-Textschatten-Schriftschatten

So verwenden Sie CSS3-Textschatten-Schriftschatten

php中世界最好的语言Original: 2017-11-24 09:27:302176Durchsuche

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>

Entsprechender CSS-Code:

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS3-Box-ShadowNächster Artikel：So verwenden Sie CSS3-Box-Shadow

In Verbindung stehende Artikel

Mehr sehen