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

对于径向渐变,前两个参数表示具有原点(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顶部.