Sommaire

Les Affichage:ombre portéeombres portées des Boîte:ombre portéeboîtes

La propriété Affichage:box-shadowbox-shadow permet d’appliquer une ombre portée aux boîtes. Cette propriété fait partie du module Backgrounds and Borders Module Level 3 qui est en Candidate Recommendation au 17 octobre 2017 : https://www.w3.org/TR/css-backgrounds-3/

La propriété box-shadow utilise plusieurs valeurs :

  • horizontal offset : décalage de l’ombre vers la droite.

  • vertical offset : décalage de l’ombre vers le bas.

  • blur radius : taille du flou de l’ombre. Cette valeur est optionnelle. La valeur par défaut est de 0.

  • spread distance : détermine le point à partir duquel l’ombre s’estompe. Cette valeur est optionnelle.

  • color : couleur de l’ombre portée. Cette valeur est optionnelle. La couleur est noire par défaut.

  • inset : permet d’appliquer l’ombre vers l’intérieur de la boîte.

Voici des exemples simples :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       p.cadre { 
           width: 600px ; 
           padding: 20px ; 
           border: 5px solid #000 ; 
    ...