-
Coins Arrondis
Merci à Nagalia
Pour faire des coins arrondis, la propriété à utiliser est "border-radius".Mais, étant une propriété code CSS 3, les vieux navigateur ne la reconnaissent pas --' Il faudra donc précéder cette propriété de -moz- et -webkit- pour quelle soit visible par tout le monde.
Voici le code CSS pour faire des coins arrondis :sélecteur {border-radius: Xpx;
-moz-border-radius: Xpx;
-webkit-border-radius: Xpx}Remplacez X pas la valeur de votre arrondis. Ce doit être la même valeur pour "border-radius", "-moz-border-radius" et "-webkit-border-radius"
Vous pouvez définir l'arrondis de chacun des angles avec ce code CSS :sélecteur {border-radius: Xpx Xpx Xpx Xpx;
-moz-border-radius: Xpx Xpx Xpx Xpx;
-webkit-border-radius: Xpx Xpx Xpx Xpx}Premier X => en haut à gauche.
Deuxième X => en haut à droite.
Troisième X => en bas à droite.
Quatrième X => en bas à gauche.
On peut aussi faire des bordures ovales, en utilisant deux valeurs pour les angles avec le code CSS ci-dessous :sélecteur {border-radius: Xpx / Ypx;
-moz-border-radius: Xpx / Ypx;
-webkit-border-radius: Xpx / Ypx;}Vous voyez qu'il y a deux valeurs séparé par un slash "/". Ne l'oubliez pas, sinon ça ne fonctionneras pas (sauf pour firefox et la dernière version de chrome, mais pensez aux autres navigateurs).
Le X représente l'arrondis horizontal et le Y l'arrondis vertical. Cela vous permet de faire des arrondis "écrasés".
Bien sur, vous pouvez définir l'arrondis de chacun des anglessélecteur {border-radius: Xpx Xpx Xpx Xpx / Ypx Ypx Ypx Ypx;
-moz-border-radius: Xpx Xpx Xpx Xpx/ Ypx Ypx Ypx Ypx;
-webkit-border-radius: Xpx Xpx Xpx Xpx / Ypx Ypx Ypx Ypx}Attention, les valeurs doivent être les mêmes pour "border-radius", "-moz-border-radius" et "-webkit-border-radius".
-
Commentaires