Comment obtenir un effet d'ombre en CSS-tutoriel CSS-php.cn

Table des matières

文本阴影！

Maison

interface Web

tutoriel CSS

Comment obtenir un effet d'ombre en CSS

Apr 29, 2021 pm 05:46 PM

css 阴影

Comment obtenir un effet d'ombre en CSS : 1. Utilisez l'attribut text-shadow pour définir le texte avec une ombre afin d'obtenir l'effet d'ombre du texte. 2. Utilisez l'attribut box-shadow pour appliquer l'ombre au texte ; boîte pour obtenir l’effet d’ombre de bordure.

Comment obtenir un effet d'ombre en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Méthode 1 : utilisez l'attribut text-shadow pour obtenir un effet d'ombre du texte

L'attribut text-shadow est utilisé pour définir le texte avec une ombre et la longueur en pixels ; la largeur de l'ombre peut être définie et la distance de flou ainsi que la couleur de l'ombre.

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1 id="文本阴影">文本阴影！</h1>
    </body> 
</html>

Copier après la connexion

Comment obtenir un effet dombre en CSS

Méthode 2 : Utilisez l'attribut box-shadow pour obtenir l'effet d'ombre de bordure

box- L'attribut shadow peut appliquer une ombre à la zone de texte et définir la longueur en pixels, la largeur et la distance de flou de l'ombre, ainsi que la couleur de l'ombre.

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置边框阴影效果</title> 
        <style> 
             div{
                width:300px;
                height:100px;
                background-color:red;
                box-shadow: 10px 10px 5px #888888;
            }
        </style> 
    </head> 
    <body> 
        <div>边框阴影！</div> 
    </body> 
</html>

Copier après la connexion

Rendu :

Comment obtenir un effet dombre en CSS

(Partage vidéo d'apprentissage : 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!

Déclaration de ce site Web

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