Ombre de police DIV CSS3 text-shadow (exemple de code)-tutoriel CSS-php.cn

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

云罗郡主

Libérer： 2018-10-16 14:21:03

avant

2340 Les gens l'ont consulté

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;}

Copier après la connexion

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>

Copier après la connexion

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}

Copier après la connexion

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!