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

<div class="menu"></div>

<div class="box2"></div>.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);    }