CSS渐变色

一. 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>

 

posted @ 2015-11-20 22:51  zcynine  阅读(319)  评论(0)  编辑  收藏  举报