Comment créer un effet d'ombre de bordure CSS3 ? (Photos + Vidéos)-connaissance CSS-php.cn

Comment créer un effet d'ombre de bordure CSS3 ? (Photos + Vidéos)

藏色散人

Libérer： 2018-09-27 15:20:14

original

7163 Les gens l'ont consulté

Cet article vous présente principalement la méthode d'implémentation détaillée de l'effet d'ombre de bordure CSS3.

Dans la conception Web, nous utilisons généralement les outils PS pour obtenir des effets tels que des images ou des ombres de bordure et des effets tridimensionnels. Mais si certains effets de base doivent être complétés par des images p, cela sera relativement inefficace.

Ci-dessous, nous vous présenterons le box-shadow de l'attribut border shadow en css3. En utilisant cet attribut, nous pouvons facilement obtenir l'effet d'ombre de bordure.

L'exemple de code d'ombre de bordure CSS3 est le suivant :

1 L'attribut box-shadow implémente l'ombre extérieure de la bordure

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS3边框阴影</title>
   <style type="text/css">
      *{margin: 0px;padding: 0px;}
      div{margin: 20px 0px;
         width: 100%;
         height: 40px;
         background: #fff;
      box-shadow:5px 5px 10px 5px #ccc;
      }
   </style>
</head>
<body>
  <div></div>
</body>
</html>

Copier après la connexion

Dans ce code HTML, nous ajoutons un attribut de style box-shadow au div et définissons les paramètres sur 5px 5px 10px 5px #ccc.

Le premier paramètre représente la position horizontale de l'ombre ;

Le deuxième paramètre représente la position verticale de l'ombre

Le troisième paramètre représente la distance de flou ;

Le quatrième paramètre représente la taille de l'ombre ;

Le cinquième paramètre représente la couleur de l'ombre

Le sixième paramètre n'est pas défini et est par défaut l'ombre extérieure ; .

Ensuite, l'effet final du code ci-dessus est le suivant :

Comme le montre la figure, nous avons réussi à définir l'ombre extérieure de la frontière pour cette div. Comment créer un effet dombre de bordure CSS3 ? (Photos + Vidéos)

Remarque

: La propriété box-shadow ajoute une ou plusieurs ombres à la boîte.

Les paramètres de l'attribut box-shadow représentent respectivement la position horizontale de l'ombre, la position verticale de l'ombre, la distance de flou, la taille de l'ombre, la couleur de l'ombre, les ombres intérieures et extérieures (la valeur par défaut est extérieure) et définissent l'ombre intérieure (en médaillon ).

2. L'attribut box-shadow implémente l'ombre à l'intérieur de la bordure

Sur la base du code HTML ci-dessus, nous apportons quelques modifications à la valeur du style box-shadow attribut :

L'effet est le suivant :

box-shadow:5px 5px 10px 5px #ccc inset;

Copier après la connexion

Comme le montre la figure, nous définissons l'effet d'ombre intérieure de la bordure sur le div . Comment créer un effet dombre de bordure CSS3 ? (Photos + Vidéos)

3. L'attribut Box-shadow permet d'obtenir un effet cylindrique

Ici, nous définissons la position de l'ombre horizontale sur 0 pixel et définissons l'ombre intérieure.

box-shadow:0px 5px 10px 10px #ccc inset;

Copier après la connexion

L'effet final est comme indiqué ci-dessous :

Comment créer un effet dombre de bordure CSS3 ? (Photos + Vidéos) Comme le montre la figure, le div montre l'effet cylindrique.

Remarque

: Dans l'attribut box-shadow, les deux premiers paramètres peuvent être négatifs et doivent exister, tandis que les paramètres suivants sont facultatifs.

Cet article concerne la méthode d'implémentation spécifique de l'effet d'ombre de bordure CSS3

Il est très facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

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!