Webkit Gradient sintaxis

Question

He estado leyendo sobre la propiedad -webkit-gradient y no lo entiendo.

radial:

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

¿Qué significa 105 105, 20, 112 120, 50?

lineal:

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

¿Qué significa 40 50, 50 50?

Answer 1

Webkit gradient documentation

Para un gradiente radial, los dos primeros argumentos representan un círculo comienzo con origen (x0, y0) y radio r0, y los dos siguientes argumentos representan un círculo extremo con origen (x1, y1) y radio r1.

Así que para radial: "105 105, 20, 112 120, 50", que es un círculo a partir de 105px izquierda y 105px parte superior con un radio de 20 píxeles y que termina en un círculo 112px izquierda y 120px parte superior con un radio de 50px;

Para lineal: "40 50, 50 50", comienza en 40px a la izquierda 50px arriba, y continúa a 50px a la izquierda 50px arriba.