mozilla
Vos résultats de recherche

    box-shadow

    Résumé

    La propriété CSS box-shadow accepte un ou plusieurs effets d'ombre définis sous la forme d'une liste séparée par des virgules. Elle permet de projeter l'ombre de presque n'importe quel élément. Si une bordure arrondie est définie à l'aide de border-radius sur l'élément auquel s'applique l'ombre, l'ombre ainsi créée aura les mêmes bords arrondis. Le niveau sur l'axe z d'ombres multiples est le même que les ombres de texte multiples (la première ombre spécifiée est sur le dessus).

    Syntaxe

    box-shadow:  none | <shadow> [,<shadow>]*
    
      où <shadow> est défini de la manière suivante :
    
    inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]
    

    Valeurs

    inset (optionnel)
    Si ce n'est pas spécifié (comme par défaut), l'ombre est supposée projetée (comme si la boîte était au-dessus du contenu).
    La présence du mot-clé inset change l'ombre en une ombre à l'intérieur du cadre (comme si le contenu était sous le niveau de la boîte). Les ombres internes sont dessinées par dessus l'arrière-plan, mais sous la bordure et le contenu.
    <offset-x> <offset-y> (nécessaire)
    Ce sont les deux valeurs de <longueur> pour définir le décalage de l'ombre. <offset-x> définit la distance horizontale. Les valeurs négatives placent l'ombre à gauche de l'élément. <offset-y> définit la distance verticale. Les valeurs négatives placent l'ombre au-dessus de l'élément. Voir <longueur> pour les unités possibles.
    Si les deux valeurs sont 0, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <blur-radius> et/ou <spread-radius> sont définis).
    <blur-radius> (optionnel)
    Ceci est une troisième valeur de <longueur>. Plus cette valeur est élevée, plus le flou sera important, rendant l'ombre plus étendue et plus légère. Les valeurs négatives ne sont pas acceptées. En l'absence de définition, la valeur est 0 (le bord de l'ombre est net).
    <spread-radius> (optionnel)
    Ceci est une quatrième valeur de <longueur>. Les valeurs positives ont pour effet d'étendre l'ombre, tandis que les valeurs négatives ont pour effet de la réduire. En l'absence de définition, la valeur est 0 (l'ombre est de la même taille que l'élément).
    <color> (optionnel)
    Voir <color> pour les mot-clés et les notations possibles.
    En l'absence de définition, la couleur dépends du navigateur. Dans Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété color est utilisée. D'un autre côté, l'ombre générée par Webkit est transparente et donc inutile si <color> est omis.

    Exemples

       -moz-box-shadow: 60px -16px teal;
    -webkit-box-shadow: 60px -16px teal;
            box-shadow: 60px -16px teal;
    
       -moz-box-shadow: 10px 5px 5px black;
    -webkit-box-shadow: 10px 5px 5px black;
            box-shadow: 10px 5px 5px black;
    
       -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
    -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
            box-shadow: 3px 3px red, -1em 0 0.4em olive;
    
       -moz-box-shadow: inset 5em 1em gold;
    -webkit-box-shadow: inset 5em 1em gold;
            box-shadow: inset 5em 1em gold; 
    
       -moz-box-shadow: 0 0 1em gold;
    -webkit-box-shadow: 0 0 1em gold;
            box-shadow: 0 0 1em gold; 
    
       -moz-box-shadow: inset 0 0 1em gold;
    -webkit-box-shadow: inset 0 0 1em gold;
            box-shadow: inset 0 0 1em gold;
    

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 10.0
    1.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    3.0 (WebKit 522)-webkit
    Ombres mutltiples 10.0
    1.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    3.0 (WebKit 522)-webkit
    mot-clé inset 10.0
    4.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    5.0 (WebKit 533)-webkit
    spread radius 10.0
    4.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    5.0 (WebKit 533)-webkit
    Fonction iOS Safari Opera Mini Opera Mobile Android Browser
    Support de base ? ? ? ?
    Ombres multiples ? ? ? ?
    mot-clé inset ? ? ? ?
    spread radius ? ? ? ?

    Notes

    • Depuis la version 5.5, Internet Explorer supporte les filtres DropShadow et Shadow. Il est possible d'utiliser cette extension propriétaire pour créer une ombre projetée (bien que la syntaxe et l'effet soient différents de ceux ce qui est créé en CSS3).
    • Les ombres affectent la présentation dans les anciennes versions de Gecko, Presto, et WebKit ; p. ex. si vous créez une ombre extérieure sur une boîte dont width vaut 100%, vous verrez une barre de défilement.

    Spécifications

    Spécification Statut Commentaire
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

     

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, Goofy, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale