66
Maîtrise des CSS
Voilà.qui.est.parfait.pour.une.boîte.simple.de.couleur.unie.et.sans.bordures,.mais.comment.
créer.un.style.un.peu.plus.sophistiqué,.comme.celui.de.la.Figure 4.5 ?
Figure 4.5
Exemple stylé de boîte
à bords arrondis.
La.technique.est.alors.la.même,.sauf.qu’au.lieu.de.définir.une.couleur.d’arrière-plan.pour.
la.boîte.vous.devez.choisir.une.image.d’arrière-plan.répétée..Pour.que.l’effet.fonctionne,.
vous.allez.devoir.appliquer.l’image.courbe.du.bas.à.un.autre.élément..Dans.cet.exemple,.j’ai.
utilisé.le.dernier.élément.de.paragraphe.de.la.boîte :.
.box {
width: 424px;
background: url(/img/tile2.gif) repeat-y;
}
.box h2 {
background: url(/img/top2.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(/img/bottom2.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}

La.Figure 4.6.présente.la.boîte.mise.en.forme..Aucune.hauteur.ne.lui.ayant.été.donnée,.elle.
s’étend.verticalement.quand.la.taille.du.texte.augmente..