CSS Tutorial: Some points about CSS gradients

Quick tip:understanding CSS3 Gradients
Chinese: Understanding CSS3 Gradients
Please respect the copyright, reproduced please indicate the source, thank you!

The idea of creating a picture for a gradient is inflexible and will soon become a bad practice. Unfortunately, as of this article, it may be necessary to do so, but hope will not last too long. Thanks to Firefox and Safari/chrome, we can now use the least effort to achieve a powerful gradient. In this article, we'll show you a simple implementation of CSS gradients and the differences between the attributes in Mozilla and WebKit kernel browsers.

PS: This article originally provided a video, but for well-known reasons, we can not watch this video on YouTube, want to see the students please do their own way to watch (Max 720P): Http://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit

Although Mozilla and WebKit often use the same syntax for CSS3 attributes, they unfortunately cannot agree on gradients. WebKit is the first browser kernel to support a gradient, which uses the following structure:

* Syntax, taken from:http://webkit.org/blog/175/introducing-css-gradients/* *
-webkit-gradient (<type> <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/* In practice ... * *
Background:-webkit-gradient (linear, 0 0, 0 100%, from (red), to (blue));

Do not worry about these grammar will make you see eye, I also like this! Just remember we need to use a comma to separate this argument group.

• Type of gradient? (linear)
• x Y axis coordinates of the start of the gradient (0 0– or Left-top)
• x Y axis coordinates of the gradient end (0 100% or Left-bottom)
• The color of the start? (from (red))
• The end of the color? (to (blue))