Nonsense fiction, look at the code
<! DOCTYPE HTML > <style type= "Text/css" >
Textarea{display:block; width:500px;height:500px; margin:100px Auto;}
. example {
WIDTH:100RPX;
height:200px;
}
. example1 {
Background:-webkit-linear-gradient (top, #ccc, #000);;
Background:-moz-linear-gradient (top, #ccc, #000);
Background:-o-linear-gradient (top, #ccc, #000);
Background:linear-gradient (Top, #ccc, #000);
}
. example2 {
Background:-webkit-gradient (linear,0 50%,100% 50%,from (#ace), to (#f96));/*old Gradient for webkit*/
Background:-webkit-linear-gradient (left, #ace, #f96)/*new gradient for webkit*/
Background:- Moz-linear-gradient (left, #ace, #f96)/*mozilla*/
Background:-o-linear-gradient (left, #ace, #f96);/*opera11*/
}
. example3{
/* Firefox 3.6+ */
Background:-moz-linear-gradient (left, #ace, #f96, #ace, #f96, #ace);
/* Safari 4-5, Chrome 1-9 */
Background:-webkit-gradient (linear, left top, right top, from (#ace), Color-stop (0.25, #f96), Color-stop (0.5, #ace), Colo R-stop (0.75, #f96), to (#ace));
/* Safari 5.1+, Chrome + * *
Background:-webkit-linear-gradient (left, #ace, #f96, #ace, #f96, #ace);
/* Opera 11.10+ */
Background:-o-linear-gradient (left, #ace, #f96, #ace, #f96, #ace);
}
<div class= "Example example1" > Linear gradient in Mozilla there are three parameters, the first parameter represents the direction of the linear gradient, top is from top to bottom, left to right, and if it is defined as the left top, it is from the top to the bottom right corner. The second and third parameters are the start and end colors, respectively. You can also insert more parameters between them, representing a gradient of multiple colors. </div>
<div class= "Example example2" ></div>
<div class= "Example Example3" ></div>
<textarea style= "" >
CSS3 gradient are divided into linear-gradient (linear gradient) and radial-gradient (radial gradient). Today, we mainly focus on the linear gradient to analyze its specific usage.
The core of several modern browsers today,
Mozilla (Gecko) (familiar with Firefox,flock and other browsers),
WebKit (familiar with Safari, Chrome and other browsers),
Opera (Presto) (opera browser),
Trident (Nasty IE browser)
</textarea>
</body>
CSS3 Gradient Linear gradient