/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
pourquoipas732
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: 115px 115px 115px 115px;" src="https://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: 125px;" src="https://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />
Pour obtenir un rond, il faut partir d'un carré:largeur=hauteur.
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="https://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />
<img style="width: 400px; height: 225px; border: 4px solid white; border-radius: 80px 0px;" src="https://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="https://ekladata.com/Rvm8bayUmrP6sNi3cPnTpZMs2Ng.jpg" alt="" />
