Comment utiliser l'ombre de la police CSS3 text-shadow-tutoriel CSS-php.cn

Comment utiliser l'ombre de la police CSS3 text-shadow

php中世界最好的语言

Libérer： 2017-11-24 09:27:30

original

2199 Les gens l'ont consulté

Le style text-shadow de CSS3 consiste à définir l'effet d'ombre du texte. À l'origine, il y avait cet attribut dans CSS2. L'ombre du texte en CSS3 est à nouveau appliquée, alors faisons-le. Jetez un œil à la façon dont text-shadow doit être utilisé.

Mots CSS3 :

text-shadow

Structure grammaticale

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

Définissez l'effet d'ombre du texte dans la zone div pour commencer à afficher l'effet d'ombre à 5 pixels de la gauche et à 2 pixels du haut. En même temps, la plage de taille de l'ombre est de 6 pixels et la couleur de l'ombre est noire (# 000).

L'effet d'ombre d'affichage du texte a 4 valeurs au total. La première valeur représente la distance depuis la gauche pour commencer à afficher l'effet d'ombre, la deuxième valeur représente la distance vers la gauche pour commencer à afficher le l'effet d'ombre, et la troisième valeur représente la taille de la plage d'ombre, la quatrième valeur est la couleur de l'effet d'ombre.

Code HTML du cas

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

Copier après la connexion

Code CSS correspondant :

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

Copier après la connexion

Ce qui précède explique comment utiliser text-shadow en CSS3. Pour des informations plus intéressantes, veuillez payer. attention aux autres sites Web chinois php Articles connexes !

Lecture connexe :

Comment masquer le contenu d'un DIV débordant

Quelles sont les techniques de mise en page CSS

Comment définir le style de police en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!