分为2种： 线性渐变 linear 径向渐变 radial
实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 800px; height: 200px; margin: 0 auto; /*渐变颜色*/ /*background: linear-gradient(red,blue);*/ /*background: linear-gradient(red,blue,yellow,pink);*/ /*background: linear-gradient(rgb(255,0,0),rgb(0,255,0));*/ /*分配颜色比*/ /*background: linear-gradient(red 60%,blue);*/ /*background: linear-gradient(red 40%,blue 30%, pink);*/ /*渐变的方向*/ /*background: -webkit-linear-gradient(left ,red,blue);*/ /*background: -webkit-linear-gradient(right ,red,blue);*/ /*渐变的兼容*/ /*浏览器前缀不分上下，但是linear-gradient这个写法必须在最后*/ /*IE9以上有效果*/ /*background: -webkit-linear-gradient(right ,red,blue); background: -moz-linear-gradient(right ,red,blue); background: -ms-linear-gradient(right ,red,blue); background: -o-linear-gradient(right ,red,blue); background: linear-gradient(right ,red,blue);*/ /*渐变的另一种写法*/ /*background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));*/ background: -webkit-gradient(linear,0 100%, 100% 100%, from(yellow), to(red)); } </style> </head> <body> <div></div> </body> </html>