Tip: Understand the linear gradient of CSS3

Translated from: Quick Tip: Understanding CSS3 Gradients
Chinese: Understand CSS3 gradient
Please respect copyright. Please indicate the source for reprinting. Thank you!

It is not flexible to create an image to display a gradient, and it will soon become a bad practice. However, unfortunately, this article may have to be written, but it may not last long. Thanks to Firefox and Safari/Chrome, we can now achieve a strong gradient with minimal effort. In this article, we will show the simple implementation of CSS gradient and the difference between this attribute in Mozilla and webkit kernel browsers.

PS: the original article originally provided a video. However, due to the well-known reasons, we cannot watch this video on Youtube. If you want to watch this video, please try your best (up to 720 P): http://www.youtube.com/watch? V = 9D2hyM5SSCE

Webkit

Although Mozilla and Webkit usually adopt the same syntax for the CSS3 attribute, they unfortunately cannot agree on the gradient. Webkit is the first browser kernel that supports gradient. It 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 ));

Don't worry that these syntaxes will make you look at it. So do I! As long as you remember, we need to use a comma to separate this parameter group.

• Gradient Type? (Linear)
• X y axis coordinates starting from gradient (0 0-or left-top)
• X y axis coordinates after gradient (0 100% or left-bottom)
• Start color? (From (red ))
• End color? (To (blue ))
  • 2 pages in total:
  • Previous Page
  • 1
  • 2
  • Next Page