Maison > Article > interface Web > Ombre de police DIV CSS3 text-shadow (exemple de code)

Ombre de police DIV CSS3 text-shadow (exemple de code)

云罗郡主avant: 2018-10-16 14:21:042318parcourir

Le contenu de cet article concerne l'ombre de la police DIV CSS3 (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. toi.

1. Mots CSS3 et grammaire

1. Mots CSS3 :
text-shadow

2. >

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

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

3. Description

Il existe 4 valeurs pour l'effet d'ombre d'affichage du texte. 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 jusqu'à la gauche. gauche pour commencer à afficher l'effet d'ombre, et la troisième valeur La première valeur représente la taille de la plage d'ombre et la quatrième valeur est la couleur de l'effet d'ombre.

2. Cas

1. Code HTML du cas

2. Code CSS correspondant :

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

Ce qui précède est le DIV CSS3. texte -Shadow font shadow (exemple de code) introduction complète, si vous voulez en savoir plus sur le

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

Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：DIV CSS3 box-shadow objet ombre de boîte et ombre d'image (exemple de code)Article suivant：DIV CSS3 box-shadow objet ombre de boîte et ombre d'image (exemple de code)

Articles Liés

Voir plus