一. Webkit浏览器
.xSelector{background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A));}
第一个参数：表示的是渐变的类型
第二个参数：分别对应x，y方向渐变的起始位置
第三个参数：分别对应x，y方向渐变的终止位置
第四个参数：设置了起始位置的颜色
第五个参数：设置了终止位置的颜色
二.Mozilla浏览器
.xSelector{background:-moz-linear-gradient(top, #FF82AB, #FFA07A);}
第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色
三.IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
.xSelector{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF82AB, endColorstr=#FFA07A, grandientType=1);}
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型,0 代表竖向渐变,1 代表横向渐变
最后写在一起就是如下代码
<!DOCTYPE html> <html> <head> <title>gradient</title> <style> body{ background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A)); background:-moz-linear-gradient(top, #FF82AB, #FFA07A); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF82AB, endColorstr=#FFA07A, grandientType=1); } </style> </head> <body></body> </html>