Syntaxe Webkit Gradient

Question

J'ai lu à propos de la propriété -webkit-gradient et je ne la comprends pas.

radial:

-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), 

Qu'est-ce que cela signifie 105 105, 20, 112 120, 50?

linéaire:

background: -webkit-gradient(linear, 40 50, 50 50, color-stop(0.0, yellow), 
      color-stop(0.5, orange), color-stop(1.0, red)); 

Qu'est-ce que cela signifie 40 50, 50 50?

Answer 1

Webkit gradient documentation

Pour un gradient radial, les deux premiers arguments représentent un cercle de départ avec origine (x0, y0) et un rayon r0, et les deux arguments représentent un cercle d'extrémité avec l'origine (x1, y1) et le rayon r1.

Donc, pour radial: "105 105, 20, 112 120, 50", il y a un cercle à partir de 105px gauche et 105px haut avec un rayon de 20 pixels et se terminant à un cercle 112px gauche et 120px haut avec un rayon de 50px; Pour linéaire: "40 50, 50 50", commencez par 40px gauche 50px en haut, et continuez en 50px gauche 50px en haut.