Quelles sont les façons d'ajouter des ombres en CSS-tutoriel CSS-php.cn

Quelles sont les façons d'ajouter des ombres en CSS

不言

Libérer： 2019-01-17 17:05:57

original

10351 Les gens l'ont consulté

Il existe trois façons d'ajouter des ombres en Quelles sont les façons dajouter des ombres en Quelles sont les façons dajouter des ombres en CSS, box-shadow, drop-shadow et text-shadow est la plus simple pour ajouter des ombres, drop- Shadow peut ajouter une ombre en fonction de la taille de l'image, et text-shadow peut ajouter une ombre au texte. Jetons un coup d'œil à ces trois méthodes d'ajout d'ombres.

Quelles sont les façons dajouter des ombres en Quelles sont les façons dajouter des ombres en CSS

Ajouter une ombre à l'aide de box-shadow

Lors de l'ajout d'une ombre à l'aide de Quelles sont les façons dajouter des ombres en Quelles sont les façons dajouter des ombres en CSS, box-shadow est la méthode la plus courante.

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影的大小 阴影的颜色;

Copier après la connexion

La position horizontale et la position verticale précisent la position de l'affichage de l'ombre

En fonction des valeurs positives et négatives, la position changera comme suit.

Position horizontale : valeur positive : droite, valeur négative : gauche
Position verticale : valeur positive : bas, valeur négative : haut

La distance de flou de l'ombre et la portée du les ombres déterminent la valeur d'apparence de l'ombre.

Toutes les unités numériques sont des px.

Regardons un exemple spécifique

Le code est le suivant

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <link rel="stylesheet" href="sample.css" />
  </head>
 
  <body>
 
    <img  src="img/girl.jpg" class="sample-box-shadow"  alt="Quelles sont les façons d'ajouter des ombres en CSS" >
 
  </body>
</html>

Copier après la connexion

Quelles sont les façons dajouter des ombres en Quelles sont les façons dajouter des ombres en CSS

.sample-box-shadow{
   box-shadow: 10px 10px 15px -10px;
}

Copier après la connexion

L'effet de l'opération est le suivant

Quelles sont les façons dajouter des ombres en Quelles sont les façons dajouter des ombres en CSS

De cette façon, vous pouvez facilement ajouter des ombres à l'image.

Comment utiliser l'ombre portée pour ajouter une ombre en fonction de la taille de l'image ?

filter: drop-shadow(左右的阴影 上下的阴影 模糊距离 阴影颜色);

Copier après la connexion

Les positions gauche et droite ainsi que les positions haut et bas sont des nombres qui spécifient la position de l'ombre de l'image originale.

La condition de flou spécifie le degré de flou de l'ombre du contour. Toutes les unités sont en px

La plus grande différence entre l'ombre portée et l'ombre de boîte est que vous pouvez définir l'ombre en fonction de celle-ci. la taille de l'image.

Afficher la différence entre l'ombre de boîte et l'ombre portée :

Quelles sont les façons dajouter des ombres en CSS

C'est un moyen très utile de mettre en valeur l'image elle-même, car elle peut ajouter une ombre à l'image comme l'image ci-dessus

Comment ajouter une ombre au texte en utilisant text-shadow ?

C'est une façon d'ajouter une ombre au texte

L'utilisation est la suivante

text-shadow:水平阴影 垂直阴影 模糊程度 阴影颜色;

Copier après la connexion

Regardons un exemple spécifique

Le code est le suivant

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <link rel="stylesheet" href="sample.css" />
  </head>
 
  <body>
 
   <p class="sample-text-shadow" style="font-size: 40px">Text-Shadow-Sample</p>
 
  </body>
</html>

Copier après la connexion

Quelles sont les façons dajouter des ombres en Quelles sont les façons dajouter des ombres en CSS

.sample-text-shadow{
   text-shadow:1px 3px 3px #513c3c;
}

Copier après la connexion

L'effet d'exécution est le suivant

Quelles sont les façons d'ajouter des ombres en CSS

Ce qui précède représente l'intégralité du contenu de cet article. Pour un contenu plus passionnant, vous pouvez prêter attention à d'autres colonnes de didacticiels connexes sur le 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!