Css3 realizes linear gradient effect_html/css_WEB-ITnose-HTML Tutorial-php.cn

Css3 realizes linear gradient effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:40

Original

1050 people have browsed it

-webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#3B90FF), color-stop(0.5,#0A0FA6))

WebKit kernel 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, stop color value),...] );

-webkit-gradient is an attribute value of background;

Linear Gradients of webkit kernel (Linear gradient) The first set of parameters type (type) is linear;

The second set of parameters is, x1 y1, x2 y2, which are the coordinates of the two points of the color gradient body. The value range of x1, x2, y1, y2 is 0%-100%. When the values of x1, x2, y1, y2 are extreme values, 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 is equal to x2 and y1 is not equal to y2, vertical gradient is achieved and y1 and y2 are adjusted. The value can adjust the gradient radius;

When y1 is equal to y2, x1 is not equal to x2, horizontal gradient is achieved, and the values of x1 and x2 can be adjusted to adjust the gradient radius;

When y1 is not equal to y2 , x1 is not equal to x2, and the angle gradient is realized. When x1, x2, y1, and y2 are extreme values, it is close to a vertical gradient or a horizontal gradient;

When x1 is equal to x2 and y1 is equal to y2, there is no gradient. , take the color from, that is, "from (color value)";

When implementing vertical gradients and horizontal gradients, the simplest values for x1 and x2 are left (or 0%) or right (or 100 %), the simplest values for y1 and y2 are top (or 0%) or bottom (or 100%);

from (start color value), to (end color value) are two gradients Color value;

[color-stop(offset, stop color value),...]: You can use multiple color-stops. If the gradient only has 2 colors, then you can This parameter is not used; the offset must be a decimal. If the offset >= 1, then the color-stop is equivalent to invalid;

Design gradient effect tool address: http://www.css88. com/tool/css3Preview/Linear-Gradients.html