Webkit Gradient syntax
I've been reading about the -webkit-gradient
property and I don't understand it.
Radial:
-webkit-gradie开发者_开发技巧nt(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
What does 105 105, 20, 112 120, 50
mean?
Linear:
background: -webkit-gradient(linear, 40 50, 50 50, color-stop(0.0, yellow),
color-stop(0.5, orange), color-stop(1.0, red));
What does 40 50, 50 50
mean?
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.
So for radial: "105 105, 20, 112 120, 50", it's a circle starting at 105px left and 105px top with a radius of 20px and ending at a circle 112px left and 120px top with a radius of 50px;
For linear: "40 50, 50 50", start at 40px left 50px top, and continue to 50px left 50px top.
精彩评论