Webkit Gradient语法

时间:2010-06-18 18:11:23

标签: webkit css3 gradient

我一直在阅读有关-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是什么意思?

1 个答案:

答案 0 :(得分:6)

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顶部。