Maison >interface Web >tutoriel CSS >Comment utiliser l'ombre de la police CSS3 text-shadow
Comment utiliser l'ombre de la police CSS3 text-shadow
- php中世界最好的语言original
- 2017-11-24 09:27:302238parcourir
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>
Code CSS correspondant :
.txt {text-shadow:5px 1px 6px #F93 }
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}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!