Home > Developer > Web Develop
Reference:
Http://www.runoob.com/css3/css3-gradients.html
The CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors.
Previously, you had to use images to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce the use of downloaded events and broadband. In addition, the elements of the gradient effect look better when zoomed in, because the gradient (gradient) is generated by the browser.
CSS3 defines two types of gradients (gradients):
To create a linear gradient, you must define at least two color nodes. The color node is the color in which you want to render a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).
Examples of linear gradients:
GrammarBackground:linear-gradient (direction, COLOR-STOP1, COLOR-STOP2, ...);
Linear gradient-top to bottom (by default)
The following example shows a linear gradient starting at the top. The starting point is red and slowly transitions to blue:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>Beginner's Tutorial (runoob.com)</title> <style>#grad1{Height:200px;background:-webkit-linear-gradient (red, blue); /*Safari 5.1-6.0*/background:-o-linear-gradient (red, blue); /*Opera 11.1-12.0*/background:-moz-linear-gradient (red, blue); /*Firefox 3.6-15*/background:linear-gradient (red, blue); /*standard syntax (must be placed at the end)*/}</style></Head><Body><H3>Linear gradient-top to bottom</H3><P>Linear gradient starting from the top. The starting point is red and slowly transitions to blue:</P><DivID= "Grad1"></Div><P><Strong>Attention:</Strong>Gradients are not supported in Internet Explorer 9 and previous versions.</P></Body></HTML>
Linear gradient-from left to right
The following example shows a linear gradient starting from the left. The starting point is red and slowly transitions to blue:
#grad { background:-webkit-linear-gradient (left, red, blue);/* Safari 5.1-6.0 */ background:-o-linear-gradie NT (right, red, blue); /* Opera 11.1-12.0 * /background:-moz-linear-gradient (right, red, blue);/* Firefox 3.6-15 */ Background:lin Ear-gradient (to right, red, blue); /* Standard syntax */}Linear gradient-Diagonal
You can create a diagonal gradient by specifying the starting position of the horizontal and vertical.
The following example shows a linear gradient starting from the upper-left corner (to the lower-right corner). The starting point is red and slowly transitions to blue:
#grad { background:-webkit-linear-gradient (left Top, red, blue);/* Safari 5.1-6.0 */ background:-O-LINEAR-GR Adient (bottom right, red, blue); /* Opera 11.1-12.0 * /background:-moz-linear-gradient (bottom right, red, blue);/* Firefox 3.6-15 */ Backgrou Nd:linear-gradient (to bottom right, red, blue); /* Standard syntax */}CSS3 gradients also support transparency (transparent), which can be used to create effects that weaken the fade.
To add transparency, we use the RGBA () function to define the color nodes. The last parameter in the RGBA () function can be a value from 0 to 1, which defines the transparency of the color: 0 is fully transparent, and 1 is completely opaque.
The following example shows a linear gradient starting from the left. The starting point is completely transparent, slowly transitioning to a completely opaque red:
#grad { background:-webkit-linear-gradient (Left,rgba (255,0,0,0), Rgba (255,0,0,1));/* Safari 5.1-6 * / Background:-o-linear-gradient (Right,rgba (255,0,0,0), Rgba (255,0,0,1)); /* Opera 11.1-12*/ background:-moz-linear-gradient (Right,rgba (255,0,0,0), Rgba (255,0,0,1));/* Firefox 3.6-15*/< C4/>background:linear-gradient (To-right, Rgba (255,0,0,0), Rgba (255,0,0,1)); /* Standard syntax */}CSS3 Gradient (gradients)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
