Apprenez étape par étape à utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)-tutoriel CSS-php.cn

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)

奋力向前

Libérer： 2021-08-04 15:41:41

original

3746 Les gens l'ont consulté

Dans l'article précédent "CSS : Comment définir un effet de dégradé pour l'arrière-plan de la page (explication détaillée du code)", je vous ai présenté comment utiliser CSS pour définir un dégradé de couleur d'arrière-plan. L'article suivant vous présentera comment utiliser CSS3 pour ajouter des effets d'ombre au texte. Voyons comment le faire ensemble.

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)

Exemple de code pour ajouter un effet d'ombre au texte à l'aide de CSS3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字阴影</title> 
<style>
h1
{text-shadow: 7px 10px 6px #FF0145;}
p
{text-shadow: 5px 5px 5px #FF0000;}
p1
{text-shadow: 5px 5px 5px #FF4780;}
</style>
</head>
<body>

<h1>php中文网</h1>
<p>php中文网</p>
<p1>文字阴影</p1>
	

</body>
</html>

Copier après la connexion

Code exécutant des rendus

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets dombre au texte (explication détaillée du code)

Lorsque le texte n'a pas d'effet d'ombre, utilisez <style></ code> Le code d'entrée est le suivant : <code><style>里面写法输入代码如下：

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets dombre au texte (explication détaillée du code)

基本写法代码示例

<style>
p{text-shadow: 5px 5px 5px #FF0000;}
</style>

<p>php中文网</p>

Copier après la connexion

代码运行效果图

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets dombre au texte (explication détaillée du code)

text-shadow

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets dombre au texte (explication détaillée du code)

Exemple de code d'écriture de base

rrreee

Code exécutant des rendus

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets dombre au texte (explication détaillée du code) La syntaxe de

text-shadow

décalage latéral

: fait référence à la position du ombre du texte par rapport au texte lui-même. De combien décaler. Zéro signifie aucun décalage et coïncide avec la position du texte ; un nombre positif signifie un décalage vers la droite ; un nombre négatif signifie un décalage vers la gauche.

Décalage vertical

: similaire au décalage horizontal, sauf que la direction est verticale, c'est-à-dire un décalage de haut en bas. 🎜🎜🎜Rayon de la plume🎜 : Plus le rayon de la plume est petit, plus l'ombre est nette ; plus le rayon de la plume est grand, plus l'ombre est floue. 🎜🎜🎜Shadow Color🎜 : Spécifiez la couleur de l'ombre, elle peut être n'importe quelle couleur. Utilisez généralement des couleurs plus foncées pour créer des effets d’ombre et des couleurs plus claires pour créer des effets d’éclat. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Apprenez étape par étape à utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)