css3 linear gradient effect_html/css_WEB-ITnose

Some navigation bar background colors are designed to have a gradient effect, which makes them look more layered and textured;

CSS3 has a special attribute to achieve this effect,

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

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 are, x1 y1, x2 y2, used as two points of the color gradient The coordinates are. 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, y1 is not equal to y2, realize vertical gradient, adjust y1 , the value of y2 can adjust the gradient radius;

When y1 is equal to y2 and x1 is not equal to x2, horizontal gradient is achieved. Adjust the values ​​of x1 and x2 to adjust the gradient radius;

When y1 is not equal to y2 and x1 is not equal to x2, 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, to achieve no gradient, take the color from, that is, "from (color value)";

When implementing vertical gradients and horizontal gradients, x1 and x2 can be the simplest The value is 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 gradient color values;

[color-stop (offset 17411f39476f21aadc96b5d7774e5857, stop color value),. ..]: Multiple color-stops can be used. If the gradient has only 2 colors, this parameter does not need to be used; the offset must be a decimal. If the offset >= 1, then the color-stop is equivalent to invalid ;

Linear Gradients (linear gradient) under firefox, please refer to:

Gradient filters can be used under ie, please refer to: http://msdn.microsoft. com/en-us/library/ms532997(VS.85).aspx

Browser compatibility:

Support Safari4Safari 4

Support Firefox 3.6

Does not support Opera 10.5

Supports ChromeChrome

Does not support IE8 Internet Explorer

Use tools

I found a very easy-to-use design tool to preview the final effect in real time

Tool address: http://www.css88.com/tool/css3Preview/Linear-Gradients.html