Transferred from: http://www.css88.com/archives/tag/webkit-gradient
A few notes and demos of Safari, Chrome's linear gradients (linear gradient) in the WebKit kernel:
- WebKit kernel of safari, Chrome's linear gradients (linear gradient) basic syntax: background-image:-webkit-gradient (type,x1 y1, X2 y2, from (start color value), To (end color value), [Color-stop (offset decimal, docked color value),...]);
- -webkit-gradient is a property value of background;
- WebKit Kernel linear gradients (linear gradient) The first set of parameter type (type) is linear;
- The second set of parameters is, X1 y1, X2 Y2, as the coordinates of the two points of the color gradient body is. The value range of the X1,x2,y1,y2 is 0%-100%, when the X1,x2,y1,y2 value is the extremum, X1 and X2 can take the value left (or 0%) or right (or 100%), y1 and Y2 can take the value top (or 0%) or bottom (or 100%) ；
- When X1 equals x2,y1 is not equal to Y2, realizes vertical gradient, adjusts y1,y2 value can adjust the gradient radius size;
- When y1 equals y2,x1 not equal to x2, realize horizontal gradient, adjust the value of x1,x2 can adjust the gradient radius size;
- When the Y1 is not equal to y2,x1 is not equal to x2, realize the angle gradient, when the X1,x2,y1,y2 value is the extremum of the time near the vertical gradient or horizontal gradient;
- When x1 equals x2,y1 equals y2, the implementation has no gradient, takes the from color, i.e. "from (color value)";
- When you implement a vertical gradient and a horizontal gradient gradient, the simplest value of X1 and X2 is left (or 0%) or right (or 100%), and Y1 and Y2 can be the simplest values of top (or 0%) or bottom (or 100%);
- From (start color value), to (end color value) is a two gradient color value;
- [Color-stop (Offset < decimal;, docked color value),...] : You can use multiple color-stop, if the gradient has only 2 colors, you can not use the parameter, the offset must be a decimal, if the offset >=1, then the color-stop equivalent to invalid;
- For linear gradients (linear gradient) under Firefox, see:
- You can use the gradient filter under IE, see: http://msdn.microsoft.com/en-us/library/ms532997 (vs.85). aspx
WebKit Core Safari, Chrome's Linear gradients (linear gradient) demo address: http://www.css88.com/tool/css3Preview/Linear-Gradients.html
WebKit Kernel Browser linear gradients (linear gradient)
