La propriété box-shadow en CSS sert de mécanisme efficace permettant aux développeurs d'introduire de la profondeur et de la dimension aux éléments HTML. En incorporant des ombres dans les éléments, on peut améliorer le réalisme et l'attractivité visuelle de l'interface utilisateur. Cet article approfondira les principes fondamentaux de box-shadow et proposera des exemples pour vous aider à maîtriser son application.
La propriété box-shadow se compose de plusieurs valeurs qui définissent la façon dont l'ombre apparaîtra. Voici la syntaxe de base :
box-shadow: offset-x offset-y blur-radius spread-radius color;
Voyons un exemple simple d'ombre de boîte appliquée à un bouton :
button { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }
Dans ce cas, l'ombre est décalée de 5px horizontalement et verticalement, a un rayon de flou de 10px et est colorée en noir avec 0,3 de opacité.
box-shadow prend également en charge le mot-clé inset, qui place l'ombre à l'intérieur de l'élément, lui donnant un effet en retrait.
div { box-shadow: inset 0 0 10px #000; }
Ici, l'ombre est placée à l'intérieur du div, créant un effet comme si le contenu était poussé vers l'intérieur.
box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;
button:hover { box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4); }
Pour ceux qui préfèrent une approche plus visuelle, consultez le générateur CSS Box-Shadow. Cet outil vous permet de créer des effets d'ombre de boîte personnalisés sans effort, sans écrire de code ni enregistrer de préréglages.
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!