Maison > Article > programmation quotidienne > Comment créer un effet d'ombre de bordure CSS3 ? (Photos + Vidéos)
Comment créer un effet d'ombre de bordure CSS3 ? (Photos + Vidéos)
- 藏色散人original
- 2018-09-27 15:20:157123parcourir
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>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
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. 
Remarque
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;
Comme le montre la figure, nous définissons l'effet d'ombre intérieure de la bordure sur le div . 
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;L'effet final est comme indiqué ci-dessous :
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!