Bordures et Background en CSS 3

Possibilités de mettre plusieurs images de fond

Et oui, ce sera possible ! Pour cela il faudra dans les propriétés séparer les valeurs par des virgules comme dans l'exemple ci-dessous :

background-image: url(a), url(b), url(a), url(b), url(a);
background-position: top, right, bottom, left, center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

background-clip : border ou padding

Détermine si le fond avance jusqu'à la bordure ou pas. Si la valeur est padding, le fond est coupé au bord du padding et le fond de la bordure est transparent. Si la valeur est border, le fond avance à la bordure.

background-origin : border ou padding ou content

Détermine comment le background-position sera calculé. Avec la valeur padding, la position relative au bord du padding ("0 0" sera le coin gauche supérieur de la bordure du padding et "100% 100%" sera le coin inférieur). La valeur border signifira que la position sera relative à la bordure, et la valeur content relative à la délimitation du contenu.

background-size : taille

Déterminera la taille de l'image de fond. Dans la taille, nous pourrons écrire par exemple la valeur "15px" qui aura pour effet de redimensionner la taille de l'image à 15px par 15px.

background-break : bounding-box ou each-box ou continuous

Concerne les sauts de pages en cas d'impression.

border-style

Dans cette propriété déjà existante, de nouvelles valeurs seront implémentées notamment wave, dot-dash et dot-dot-dash.

Illustration du W3C

border-image

Permettra d'appliquer une image en guise de bordure. Sa mise en place sera quelques peu compliquée car elle necessite de procéder à quelques petits calculs.

Ainsi une image telle que celle-ci :

Illustration du W3C