Webkit 渐变语法

Question

我一直在阅读有关 -webkit-gradient 属性的内容，但我不明白。

径向:

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

105 105, 20, 112 120, 50 是什么意思？

线性:

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

40 50, 50 50 是什么意思？

Answer 1

Webkit gradient documentation

For a radial gradient, the first two arguments represent a start circle with origin (x0, y0) and radius r0, and the next two arguments represent an end circle with origin (x1, y1) and radius r1.

所以对于径向:“105 105, 20, 112 120, 50”，它是一个圆，从左边 105 像素、顶部 105 像素开始，半径为 20 像素，结束于左边 112 像素、顶部 120 像素、半径为 50 像素的圆；

对于线性:“40 50、50 50”，从左 40px 上 50px 开始，继续到左 50px 上 50px。