Vidéo: Prestashop 1.7 - Présentation Module Arrondi à 5ct 2025
Au lieu de devoir utiliser jusqu'à quatre images distinctes pour donner l'illusion d'une forme incurvée sur votre site web, avec CSS3 vous pouvez maintenant créer des conteneurs avec des coins courbes! Voici le code, qui contient en haut la déclaration CSS3 entièrement supportée, suivie des doublons préfixés pour les autres navigateurs:
#box {border-radius: 20px; / * pour Mozilla Firefox * / -moz-border-radius: 20px; / * pour Safari et Google Chrome * / -webkit-border-radius: 20px;}
Vous pouvez utiliser le style border-radius sur n'importe quel objet, y compris les images rectangulaires. Plus le nombre de pixels est grand, plus le contour est rond.
Avant CSS3, si vous vouliez avoir plusieurs colonnes sur votre page, vous devez soit faire flotter des éléments dans des conteneurs, soit les positionner absolument par rapport à un conteneur parent. Maintenant, avec CSS3, vous pouvez facilement créer plusieurs colonnes dans un seul conteneur en utilisant la propriété column en définissant les valeurs du nombre de colonnes et de la largeur de l'espace, avec ou sans règle verticale entre elles.
# box1 {/ * pour les navigateurs ne nécessitant pas de préfixe * / nombre de colonnes: 4; intervalle de colonne: 30px; colonne-règle: 3px solide #fff; / * pour Mozilla Firefox * / -moz-column-count: 4; -moz-column-gap: 30px; -moz-column-rule: 3px solide #fff; / * pour Safari et Google Chrome * / -webkit-column-count: 4; -webkit-column-gap: 30px; -webkit-column-rule: 3px solid #fff;}
L'illustration montre une comparaison d'une couche utilisant le style multicolonne et une autre mise en page sans colonnes. Pour plus d'informations sur la façon dont vous pouvez contrôler davantage l'apparence de vos colonnes multiples, consultez Quirksmode.
