<styletype= "Text/css">. Linear{width:100%;Height:600px;FILTER:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0,startcolorstr= #b8c4cb, endcolorstr=red); /*IE 6 7 8*/background:-ms-linear-gradient (Top, #fff, #0000ff); /*IE Ten*/background:-moz-linear-gradient (Top, #b8c4cb, #f6f6f8);/*Firefox*/background:-webkit-gradient (linear, 0% 0, 0% 100%,from (#b8c4cb), to (#f6f6f8));/*Google*/background:-webkit-gradient (linear, 0% 0, 0% 100%, from (#fff), to (#0000ff)); /*Safari 4-5, Chrome 1-9*/background:-webkit-linear-gradient (Top, #fff, #0000ff); /*Safari5.1 Chrome*/background:-o-linear-gradient (Top, #fff, #0000ff); /*Opera 11.10+*/} </style> <Body><Divclass= "Linear"></Div> </Body>
In Google mode:
IE mode:
Firefox mode:
FILTER (ie mode); Background:-moz-linear-gradient (Firefox mode); Background:-webkit-gradient (Google mode).
The above is to distinguish the different effects of different browsers, I distinguish the color code open. To be compatible with all browsers with the same effect of the CSS3 gradient, you can debug the color code as well.
CSS settings div background color gradient display