Border-rayon avec la division

Question

J'ai du mal à comprendre Mozilla's l'explication de la propriété de rayon de frontière quand la division est impliquée.

Exemple:

/* (first radius values)/top-left | top-right | bottom-right | bottom-left */ 
border-radius: 10px 5%/20px 25em 30px 35em; 

je sais que la première valeur 10px est la largeur du rayon et 5% est la hauteur. Je ne comprends pas comment ils sont touchés par les chiffres suivant le /.

Un échantillon: https://jsfiddle.net/wvyesszq/1/

Answer 1

On peut donner à chaque coin de deux valeurs (de sorte que le maximum de 8 valeurs sont) qui est le rayon dans deux directions (horizontal/vertical).

Je pense que les images suivantes expliquent parfaitement bien:

La première série de valeurs définissent le rayon horizontal. Et éventuellement le deuxième ensemble de valeurs, précédé d'un '/' (ce n'est pas une divison), définit le rayon vertical. Si un seul ensemble de valeurs est fourni, celui-ci est utilisé pour le rayon vertical et le rayon horizontal (ce qui est apparemment la raison de la confusion).

Vous avez donc eu tort - dans votre exemple, le 10px est le rayon horizontal du haut gauche et du bas droit. Et le 5% est le rayon horizontal du haut-droit-et-bas-gauche. Et les quatre autres valeurs après '/' sont les rayons verticaux pour le haut à gauche, le haut à droite, le bas à droite et le bas à gauche. Alors rappelez-vous: Sur les deux sites il y a des raccourcis possibles (avant '/' et après), donc vous pouvez vraiment tout avoir entre 2 et 8 valeurs).

Consultez la documentation de border-radius.