码迷,mamicode.com
首页 > Web开发 > 详细

CSS3径向渐变linear-gradient

时间:2015-09-21 06:56:42      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

语法:

 

选择器{ 
    background:linear-gradien(线性渐变的方向,起点颜色,终点颜色); 
}

 

第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left;

第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果;支持直接写颜色,或16进制颜色

 

 

兼容性问题:

支持chrome和火狐,其他浏览器尚未测试,部分支持IE10,

为了支持chrome和火狐,要分别写上-webkit-,-moz-

比如:

div{
    background:-webkit-linear-gradient(top,red,blue);/*谷歌*/    
    background:-moz-linear-gradient(top,red,blue);  /*火狐*/
    background:linear-gradient(top,red,blue);  /*ie10*/
         
}

之所以说部分支持IE10,是因为我测试时,第一个参数,写了多种之后,发现IE10只支持少数的几种方向。

 

ie6~9的背景色渐变:

其实是用了filter滤镜来做:

.div{
            filter: progid:DXImageTransform.Microsoft.gradient(
                GradientType=0,
                startColorstr=pink,
                endColorstr=black
            );
            /*IE7*8*9有效*/

其中:GradientType=1代表纵向,0代表横向

CSS3径向渐变linear-gradient

标签:

原文地址:http://www.cnblogs.com/hamsterPP/p/4825075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!