渐变就是多种颜色混合而成的效果,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);
}