Comment encadrer un contenu par une box aux bords arrondis ?
C'est assez simple à faire quand il s'agit d'une largeur fixe, mais lorsque la largeur varie, il fallait passer par des artifices souvent périlleux aux affichages différents d'un navigateur à l'autre.
Avec un navigateur récent et respectant les standards, il est maintenant très facile de réaliser cette opération. Sachez cependant que pour l'instant, Internet Explorer ne respecte toujours pas entièrement les standards. Donc les bords arrondis et les dégradés ne seront pas reconnus. Ce n'est pas grave, par défaut, il restera quand même un cadre sans bordure. Reste à savoir quel doit être le degré de compatibilité que vous voulez avoir.
Tout d'abord, en HTML, le contenu doit être simplement encadré par le code suivant :
<div class="box">
''...le contenu...''
</div>
Avec ceci, nous pourrons ajouter les coins arrondis ainsi qu'un beau dégradé. En CSS :
.box {
margin: 20px 5px 10px; padding: 10px ;
background-color: #F9F9F9;
border: 1px solid #DDD;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 1px 12px #999;
-moz-box-shadow: 1px 1px 12px #999;
-webkit-box-shadow: 1px 1px 12px #999;
}
Les codes standards sont border-radius et box-shadow. Pour être sur que cela reste compatible avec la majorité des autres navigateurs, rajouter la même ligne avec -moz- (moteurs Gecko tel que Mozilla Firefox 3.1+) et -webkit- (Safari, Chrome).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla sit amet leo venenatis tempor. Nam ac justo ligula. Quisque ullamcorper velit vehicula ligula varius sagittis. Vivamus elementum porttitor purus id malesuada.
Duis condimentum convallis suscipit. Fusce scelerisque nisi vel justo semper dapibus. Vivamus tincidunt elit ac est laoreet semper. Vestibulum non dui eros. Nulla lobortis, augue ut pellentesque rutrum, nibh arcu semper est, ac tempus nulla eros dictum diam. Morbi id urna libero.
