65
Utilisation des effets d’arrière‑plan
Le.balisage.pour.la.boîte.ressemble.à.ceci :

Dans.votre.logiciel.d’édition.d’image.favori,.vous.devez.créer.deux.images.comme.celles.de.
la.Figure 4.4 :.l’une.pour.le.haut.de.la.boîte.et.l’autre.pour.le.bas..Le.code.et.les.images.de.
cet.exemple.comme.ceux.de.tous.les.autres.exemples.du.livre.peuvent.être.téléchargés.sur.
le.site.www.pearson.fr.
Figure 4.4
Les images courbes
du haut et du bas.
Ensuite,.appliquez.l’image.du.haut.à.l’élément.titre.et.celle.du.bas.à.la.div.de.la.boîte..Ce.
style.de.boîte.possédant.un.remplissage.uni,.vous.devez.créer.le.corps.de.la.boîte.en.ajoutant.
une.couleur.d’arrière-plan.à.la.div.de.la.boîte :.
.box {
width: 418px;
background: #effce7 url(/img/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(/img/top.gif) no-repeat left top;
}
Comme.il.ne.faut.pas.que.le.contenu.vienne.buter.sur.les.bords.de.la.boîte,.vous.devez.aussi.
ajouter.un.remplissage.aux.éléments.dans.la.div :
.box {
width: 418px;
background: #effce7 url(/img/bottom.gif) no-repeat left bottom;
padding-bottom: 1px;
}
.box h2 {
background: url(/img/top.gif) no-repeat left top;
margin-top: 0;
padding: 20px 20px 0 20px;
}
.box p {
padding: 0 20px;
}