• Arrondis CSS

    Une question me permet de revenir sur un attribut qui arrondit les angles d'une image ou d'un cadre: border-radius.

    2 unités principales: en px ou en %.

    En pixels, l'arrondi sera le même sur la hauteur et sur la hauteur; en pourcentage, si la hauteur est différente de la largeur, l'arrondi sera différent.

    Ecriture attribut: border-radius:angle haut-gauche/angle haut-droit/ angle bas-droit/angle bas-gauche;  border-radius:50px 40px 30px 20px;

    Cet ordre étant défini, nous pouvons ne modifier qu'un des angles:border-radius:0px 0px 50px 0px; ou border-radius:0% 0% 10% 0%;

    Ecriture simplifiée: si l'angle est le même sur chaque coin: border-radius:50px;


    <img style="width:400px; height:225px; border: 4px solid white; border-radius: 50px 40px 30px 20px;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />

    <img style="width:400px; height:225px;border: 4px solid white; border-radius: 50% 40% 30% 20%;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />

    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 115px 115px 115px 115px;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />
    Pour obtenir un rond, il faut partir d'un carré:largeur=hauteur.


    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 50%;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />

    <img style="width: 250px; height: 250px; border: 4px solid white; border-radius: 125px;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />
    Pour obtenir un rond, il faut partir d'un carré:largeur=hauteur.


    <img style="width: 250px; height: 250px; border: 4px solid white; border-radius: 50%;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />

    Si nous voulons obtenir des arrondis non réguliers, une écriture le permet:
    border-radius:20px/60px;
    ou, en %: border-radius:10%/30% ;


    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 80px/20px;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />


    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 10%/30%;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />

    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 80px 0px;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />


    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 0% 25%;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />

    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 80px 0px 0px 0px; box-shadow: -4px -4px 10px black;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />



    <img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 0% 0% 0% 35%/45%; box-shadow: -4px 4px 10px black;" src="http://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />