Color Gradient CSS
IE series
Filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= ' #FF0000 ', endcolorstr= ' #F9F900 ', gradienttype= ' 0 ');
Parameters: StartColorStr start color endcolorstr end color GradientType 0 o'clock for vertical, 1 o'clock for horizontal
Firefox
Background:-moz-linear-gradient (top, #FF0000, #F9F900);
Parameters: Top, bottom vertical, left, right level for example: Top from #ff0000 to #f9f900 gradient from top, bottom from bottom by #ff0000 to #f9f900 gradient
Opera
Background:-o-linear-gradient (top, #FF0000, #F9F900);
Parameters: Top, bottom vertical, left, right level for example: Top from #ff0000 to #f9f900 gradient from top, bottom from bottom by #ff0000 to #f9f900 gradient
WebKit, such as Chrome, Safari, etc.
Background:-webkit-gradient (linear, 0% 0, 0% 100%, from (#FF0000), to (#F9F900));
Parameters: Linear linear, X1 x2, x3 x4 x1 perpendicular to x3 phase, X2 and x4 simultaneously horizontal from start color to end color
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> linear gradient (linear-gradient)---http://www.jb51.net</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>
<body>
<div class= "Test1" >
Vertical gradient
</div>
<div class= "Test2" >
Horizontal gradient
</div>
</body>
Color Gradient CSS