CSS : la propriété background-clip

Résumé

La propriété CSS background-clip spécifie si la couleur ou l'image d'arrière-plan d'un élément doit s'étendre sous sa bordure.

S'il n'y a pas d'image d'arrière-plan, la propriété n'a d'effet que si la bordure a des zones transparentes (à cause de border-style) ou est partiellement opaque. Sinon, la bordure cache la surface en-dessous.

Syntaxe

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

Valeurs

border-box
L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (mais reste en-dessous de la bordure sur l'axe z).
padding-box
L'arrière-plan n'est pas dessiné sous la bordure (l'arrière-plan s'étend jusqu'au bord extérieur du padding).
content-box
L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.

Exemples

 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* L'arrière-plan jaune n'ira pas dessous la bordure */
   background-clip: padding-box;
 }

Spécifications

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

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] Pas de support 3.0 (522) [3]
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base ? ? ? ? ?
content-box ? ? ? ? ?

[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond de Firefox 1.0 à 3.6 inclus, la syntaxe préfixée : -moz-background-clip: padding | border.

[2] Internet Explorer 7, mais pas les autres version de Internet Explorer, se comporte comme background-clip:padding si overflow: hidden | auto | scroll.

[3] Webkit supporte aussi une version préfixée de cette propriété, et dans ce cas, en supplément des autres mots-clés, les synonymes suivants : padding, border, et content.

[4] Konqueror 3.5.4 supporte -khtml-background-clip.

Voir également

Étiquettes et contributeurs liés au document

 Dernière mise à jour par : FredB,