css垂直渐变
#example3 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
/* ie10 */
background-image: -ms-linear-gradient(red, green, blue, purple, orange);
/* opera 11.1 */
background-image: -o-linear-gradient(red, green, blue, purple, orange);
/* The "standard" */
background-image: linear-gradient(red, green, blue, purple, orange);
｝
水平渐变
｛
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FD1207',endColorStr='#5DF907',gradientType='1');
background: -moz-linear-gradient(left, #FD1207, #5DF907);
background: -o-linear-gradient(left,#FD1207, #5DF907);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FD1207), to(#5DF907));
｝