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 渐变文档

对于径向渐变，前两个参数表示以原点 (x0, y0) 和半径 r0 为起始圆，接下来的两个参数表示以原点 (x1, y1) 和半径为 r1 的结束圆。

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

对于线性：“40 50, 50 50”，从 40 像素左 50 像素顶部开始，并继续到 50 像素左 50 像素顶部。