CSS linear gradient vertical and horizontal gradient linear-gradient, csslinear-gradient
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> CSS linear gradient </title>
<Style type = "text/css">
. Test1 {
Width: 200px;
Height: 80px;
Text-align: center;
Line-height: 80px;
Margin-bottom: 10px;
Color: White;
Font-size: 20px;
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = '# FF0000', endColorStr = '# F9F900', gradientType = '0 ');
Background:-moz-linear-gradient (top, # FF0000, # F9F900 );
Background:-o-linear-gradient (top, # FF0000, # F9F900 );
Background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (# FF0000), to (# F9F900 ));
}
. Test2 {
Width: 200px;
Height: 80px;
Text-align: center;
Line-height: 80px;
Margin-bottom: 10px;
Color: White;
Font-size: 20px;
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = '# FF0000', endColorStr = '# F9F900', gradientType = '1 ');
Background:-moz-linear-gradient (left, # FF0000, # F9F900 );
Background:-o-linear-gradient (left, # FF0000, # F9F900 );
Background:-webkit-gradient (linear, 0% 0%, 100% 0%, from (# FF0000), to (# F9F900 ));
}
</Style>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<Div class = "test1"> CSS vertical gradient </div>
<Div class = "test2"> CSS horizontal gradient </div>
</Body>
</Html>