Maison > Article > interface Web > 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:302130parcourir

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser l'ombre de la boîte CSS3Article suivant：Comment utiliser l'ombre de la boîte CSS3

Articles Liés

Voir plus