Webkit Gradient语法

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

  

对于径向渐变，前两个参数表示具有原点（x0，y0）和半径r0的起始圆，接下来的两个参数表示具有原点（x1，y1）和半径r1的结束圆。

因此对于径向：“105 105,20,112 120,50”，它是一个圆形，从105px左侧开始，105px顶部，半径为20px，结束于一个圆形112px左侧和120px顶部，半径为50px;

对于线性：“40 50,50 50”，从40px开始，离开50px顶部，并继续向50px离开50px顶部。