• 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 angles

    sé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

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :