72
Maîtrise des CSS
Seule. différence  :. au. lieu. de. définir. une. seule. image. d’arrière-plan,. vous. pouvez. utiliser.
autant.d’images.que.vous.le.souhaitez..Voici.le.principe :
.box {
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: top left,
top right,
bottom left,
bottom right;
}

Commencez. par. définir. toutes. les. images. que. vous. souhaitez. utiliser. avec. la. propriété.
background-image..Ensuite,.indiquez.si.vous.voulez.les.répéter.ou.non..Puis,.fixez.leurs.
positions.respectives.avec.la.propriété.background-position..Le.résultat.est.présenté.à.la.
Figure 4.12..Safari.prenait.en.charge.les.images.d’arrière-plan.multiples.dès.sa.version 1.3..
Firefox.et.Opera.ont.emboîté.le.pas.dans.leurs.dernières.versions..Internet.Explorer.ne.les.
reconnaît. pas. encore,. mais. ne. vous. privez. pas. d’utiliser. cette. technique. si. vous. estimez.
qu’il  est. acceptable. que. les. utilisateurs. d’Internet. Explorer. voient. des. coins. carrés. à. la.
place..
Figure 4.12
Une boîte à bords
arrondis créée avec des
arrière-plans multiples
en CSS 3.
border-radius
À.une.époque.où.pullulent.les.jeux.vidéo.haute.définition.qui.redessinent.des.textures.à.la.
volée,.il.ne.paraîtrait.pas.totalement.insensé.que.les.navigateurs.soient.capables.de.dessiner.par.eux-mêmes.des.boîtes.simples.à.bords.arrondis,.sans.utiliser.d’images.vectorielles..