Gradient background has been in the Web page is a common visual elements. But all along, Web designers are designing these gradients through a graphical software, and then apply to the page in picture form or in the form of the background image. The effect achieved on the Web page, the page only from the point of view of visual effects, and design does not have any differences. In fact this method is more troublesome, because you first need designers to design and then cut plan, the application to the page through style. Further, in practical applications poor scalability, also directly affect the performance of the page. Fortunately, W3C organization to the income gradient design CSS3 standards, so that the majority of front-end designers directly benefit can be directly produced a similar effect by fading pictures of CSS3 gradient property. And slowly been graded properties compatible with many modern browsers, and even annoying IE, the IE10 version also supports this property.
CSS3 Gradient into linear-gradient (linear gradient) and a radial-gradient (radial gradient).
1 CSS3 gradients Introduction
For to understand the CSS3 gradient, you must first know what gradient is a CSS3? From the earlier design, we can know that the gradient is a smooth transition between two or more colors. In the process of creating a gradient, it is possible to specify a plurality of intermediate color value, which is called color. Each color comprises a color and a position, from the browser to fade the color of each color patch to the next, to create a smooth gradation. As shown below:
Gradient can be applied anywhere in the background image. This means that CSS styles, gradient equivalent to the background image, using in place theoretically () value in use of any url, such as the most common background-image, list-style-type frame and the image of the previously described CSS3 property border-image. But until now, only the most perfect support in the background image.
Linear gradient 2
Linear gradient during the transition color along a straight line: from left to right, from right to left, from the top in the end portion, from the bottom to the top or along any arbitrary axis. If you've used to make maps, such as Photoshop, then you will not be unfamiliar to a linear gradient.
CSS3 gradients produced, in fact, the production and use of software in the gradient tool does not make any difference. First you need to specify the direction of a gradient, starting color gradient end color, gradation. It has three parameters can create one of the easiest and most common transition effects. If you need to create a complex multi-color gradient effect, we need to add more color gradient in the same direction. The gradation parameter includes (at least three), each of the browser will draw a vertical line with a gradient color fill the entire vessel junctions. Browser to render the effect is similar to the production software designed gradation image, a smooth fade from one color to another color, the meaning of a linear gradient direction to achieve a color gradient.
Linear gradient of the following format:
linear-gradient ([<starting point> || <angle>]? <Point> <Point> ...)
Linear gradient parameters as described in Table 1:
Table 1 CSS3 linear gradient Parameter Description
