CSS3 Tutorial (1): CSS3 gradient (CSS3 gradient)

Article Introduction: CSS3 gradient are divided into linear-gradient (linear gradients) and radial-gradient (radial gradients).

CSS3 released for a long time, now some of the foreign pages can often see his figure, which I envy for a long time, but unfortunately in the country in order to compatible with IE, so that this technology is subject to a lot of restrictions, many Web front-end staff are looking at and halt. However, there are still many friends in the study of CSS3 in the Web application, in order not to be eliminated, I also began to CSS3 , and strive to keep up with the forefront of technology. From now on I will continue to release some CSS3 applications, and share with you, today we first want to see is: CSS3:GRADIENT─CSS3 gradient.

CSS3 gradient are divided into linear-gradient(linear gradients) and radial-gradient(radial gradients). And today we are mainly focusing on linear gradients to analyze their specific usage. In order to better apply CSS3 gradient, we need to first understand the current several modern browser kernel, the main content is mainly Mozilla(familiar with Firefox,flock and other browsers),WebKit (familiar with Safari, Chrome and other browsers),Opera(opera browser), Trident (annoying IE browser). This article ignores IE regardless, we mainly look at Mozilla, Webkit, opera under the application, of course, in IE can also be implemented, he needs to use IE specific filters to achieve, in the following will list the usage of filter syntax, but will not specifically describe how practical, Interested in searching for relevant technical documentation. So let's get to the point where we're going to start today's topic.

Linear gradient of CSS3

The application of linear gradient in Mozilla

Grammar:

-moz-linear-gradient ([  ,]? ,  [, ]*)

parameter: It has three parameters, the first parameter represents the direction of the linear gradient, top is from up to down, left is left-to-right, and if it is defined as left top, it is from the upper left-hand corner to the lower right corner. The second and third parameters are the start and end colors respectively. You can also insert more arguments between them to indicate a variety of color gradients. As shown in the figure:

Based on the above introduction, let's take a look at a simple example:

Html:

Css:

. example {width:150px;  height:80px; }

(without special instructions, the following example is the basic code that applies this section of HTML and CSS)

Now let's apply a simple gradient style to this div:

. example1 {background:-moz-linear-gradient (top, #ccc, #000);}

The effect is as follows:

Note: This effect is temporary only in the Mozilla kernel browser to display normally.

[1] [2] [3] [4] Next page