Suivre

Propriétés: background-clip

Maj: septembre 2011

La propriété background-clip a 3 valeurs possibles :

border-box : le fond est étendu aux limites extérieures de la bordure (mais reste dessous)
padding-box : le fond est étendu aux limites extérieures du padding
content-box : le fond est étendu aux limites extérieures du contenu (aux limites intérieures du padding ?)

background-clip:border-box;

background-clip:padding-box;

background-clip:content-box;

Cette règle est implémentée inégalement dans les navigateurs :

Gecko (Firefox) utilise -moz-background-clip et les anciennes valeurs border ou padding.
Maj : Firefox 4 utilise la syntaxe officielle.
Webkit (Chrome-Safari) utilise -webkit-background-clip et les valeurs border, padding, content ou text. text permet de restreindre le fond aux limites du texte, comme si le texte était un masque. Pour un exemple, voir Typo façon Apple.
Presto (Opéra) utilise la syntaxe officielle comme expliqué plus haut. Seul content-box n’est pas implémenté.
IE9 utilise la syntaxe officielle.

Démos