html背景线性渐变,CSS3背景颜色渐变 - 线性/放射性/循环

渐变就是多种颜色混合而成的效果，css3要实现渐变，就必须使用渐变函数来设置background或则background-imge属性。同时为了兼容各个浏览器(IE，safari，chrome，Firefox)，还需要添加对应的带前缀的渐变

一、线性渐变

1、使用linear-gradient()函数可以创建渐变

CSS.menu {

background: linear-gradient(top, #1770CE, #0352a2);

background: -ms-linear-gradient(top, #1770CE, #0352a2);

background: -webkit-linear-gradient(top, #1770CE, #0352a2);

background: -moz-linear-gradient(top, #1770CE, #0352a2);

}

HTML

.box2 {

width：200px；

height： 200px；

background: linear-gradient(top left, white, blue);/*渐变从左上角到右下角*/

background: -ms-linear-gradient(top left, white, blue);

background: -webkit-linear-gradient(top left, white, blue);

background: -moz-linear-gradient(top left, white, blue);

}