Comment ajouter des ombres aux polices et aux éléments en CSS ? implémentation de text-shadow et box-shadow

Cet article vous présentera comment ajouter des ombres aux polices et aux éléments en CSS ? Implémentation de text-shadow et box-shadow. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Syntaxe :

Sélecteur d'objet {text-shadow: X-axis offset Y-axis offset shadow blur radius shadow color}

Remarque : text-shadow peut utiliser une ou plusieurs projections. Si plusieurs projections sont utilisées, elles doivent être séparées par des virgules ",".
2. Valeur :

L'attribut box-shadow peut avoir jusqu'à 6 paramètres, et leurs valeurs respectives sont :

　(1) Shadow montant du décalage horizontal : fait référence au décalage horizontal de l'ombre. Sa valeur peut être positive ou négative. Si la valeur est positive, l'ombre est sur le côté droit de l'objet. Sinon, lorsque la valeur est négative, l'ombre est allumée. le côté gauche de l'objet ;

　(2) Le décalage vertical de l'ombre : fait référence au décalage vertical de l'ombre. Sa valeur peut également être positive ou négative. S'il s'agit d'une valeur positive, l'ombre. est en bas de l'objet. Sinon, sa valeur est négative Lorsque, l'ombre est en haut de l'objet

　(3) Rayon de flou de l'ombre : Ce paramètre est facultatif. , mais sa valeur ne peut être que positive. Si la valeur est plus grande, l’ombre sera floue, sinon l’ombre sera plus claire. Si sa valeur est 0, cela signifie que l'ombre n'a pas d'effet de flou ;

(4) Couleur de l'ombre : Ce paramètre est facultatif si aucune couleur n'est définie, le navigateur prendra la couleur par défaut, mais chaque navigateur. Les couleurs par défaut sont différentes, en particulier les navigateurs Safari et Chrome sous le noyau webkit seront incolores, c'est-à-dire transparents. Il est recommandé de ne pas omettre ce paramètre

Avant la sortie de CSS3, la méthode de gestion des ombres de texte ; c'était en gros Il y a des photos partout. Jusqu'à l'émergence de CSS3, notre méthode de création d'ombres de texte a encore été améliorée. En fait, text-shadow est apparu dans CSS2, mais il n'a pas été impitoyablement abandonné dans CSS2.0. Il est maintenant à nouveau utilisé dans CSS3. Cela montre que text-shadow mérite toujours notre attention. Par conséquent, en tant que personnel front-end qualifié, la maîtrise de l’ombre du texte doit être une priorité absolue.

CSS3 Définition de l'effet d'ombre du texte et définition de l'effet d'ombre sur le style text-shadow de la police du texte À l'origine, cet attribut existait également dans la version CSS2, mais dans CSS3, l'ombre du texte text-shadow est à nouveau appliquée pour enrichir. la mise en page du texte et l’embellir.

3. Mots et syntaxe CSS3

Mots CSS3 : text-shadow

Structure grammaticale :

text-shadow: 5px 2px 6px black;

5px représente Affichage : l'ombre est affichée à 5px de la gauche du texte

2px signifie : l'ombre est affichée à 2px du texte

6px représente : la plage de taille de l'ombre

noir représente : la couleur de l'ombre est Noir

Par exemple :

<p class="orange" id="all"> 
    <h1>smile微笑</h1> 
</p>

　　　　 body {
				width: 100%;
				margin: 0px auto;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			.orange {				
				background-color: #f8f8f8;
				padding: 30px;				
			}
			
			.orange h1 {
				font: normal 32px 微软雅黑, sans-serif;
				padding: 20px 0 20px 40px;
				text-align: center;
				display: block;
				color: #FFF;
				background-color: lightskyblue;
				border-radius: 5px;
				text-shadow: 5px 2px 6px #000;//text-show是字的阴影
				box-shadow: 5px 2px 6px #000;//box-show是盒子的阴影
			}        　　

L'effet est comme indiqué :

Résumé : Nous espérons que ce qui précède est utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS , Tutoriel vidéo CSS3  !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Manuel en ligne CSS3

Tutoriel graphique div/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!