1153次阅读
线性渐变和径向渐变

CSS3的渐变分为两种,线性渐变和径向渐变,先来看看线性渐变:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>线性渐变和径向渐变</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="baseLinear"></div>
</body>	
check the result

css:

.baseLinear {
  width : 100px;
  height : 100px;
  background : -moz-linear-gradient(center, #ccc, #000); /*firefox*/
  background : -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#000)); /*chrome,360,sougo,baidu,safari,opera*/
  background : -webkit-linear-gradient(top, #ccc, #000); /*chrome,360,sougo,baidu,safari,opera*/
  background : -o-linear-gradient(top, #ccc, #000); /*(none)*/
  background : -ms-linear-gradient(top, #ccc, #000); /*ie*/
  background : linear-gradient(top, #ccc, #000); /*none*/
}	

首先需要注意的是,这里不是设置background-color,而是直接设置background,渐变可以当作图片资源来看待,所以能用url的地方就能用渐变。这是一个很简单的例子,从上到下的线性渐变,但是代码有点复杂,这是因为要兼容不同内核的浏览器。先来看看-moz-linear-gradient,这是Gecko引擎浏览器的写法,常见的是火狐浏览器。主要是三个参数,第一个是渐变方向,可取top、left、bottom、right以及它们的组合如top left,第二三个参数是起始颜色和终止颜色。-webkit-gradient是老式的Webkit引擎的写法,一共五个参数,第一个是渐变类型,线性渐变就是linear咯,第二三个参数是起点和终点,第四五个参数是起始颜色和终止颜色。-webkit-linear-gradient是新式Webkit引擎的写法,参数意义和第一个一样。-o-linear-gradient是Presto引擎的写法,典型的有Opera,但是测试下来新版的opera也不认这种写法,认webkit写法,不知道怎么回事。-ms-linear-gradient是IE的写法。linear-gradient是W3C推荐的标准写法,但是好像没有那个浏览器实现了。

除了基本写法,线性渐变还有其他用法,看看例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>线性渐变和径向渐变</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="angleLinear"></div>
  <div class="multiLinear"></div>
</body>	
check the result

css:

.angleLinear {
  width : 100px;
  height : 100px;
  background : -moz-linear-gradient(20deg, #ccc, #000);
  background : -webkit-linear-gradient(20deg, #ccc, #000);
  background : -ms-linear-gradient(20deg, #ccc, #000);
}
.multiLinear {
  width : 500px;
  height : 100px;
  background : -moz-linear-gradient(0deg, red, blue, green, pink, black);
  background : -webkit-linear-gradient(0deg, red, blue, green, pink, black);
  background : -ms-linear-gradient(0deg, red, blue, green, pink, black);
}	

线性渐变还能使用角度,这样任意方向都不怕啦,还能多重渐变,怎么样很棒吧?

下面再来看看径向渐变,先来个简单例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>线性渐变和径向渐变</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="baseRadial"></div>
</body>	
check the result

css:

.baseRadial {
  width : 100px;
  height : 100px;
  background : -moz-radial-gradient(center, #ccc, #000); /*firefox*/
  background : -webkit-gradient(radial, center center, center center, from(#ccc), to(#000)); /*chrome,360,sougo,baidu,safari,opera*/
  background : -webkit-radial-gradient(center, #ccc, #000); /*chrome,360,sougo,baidu,safari,opera*/
  background : -o-radial-gradient(center, #ccc, #000); /*(none)*/
  background : -ms-radial-gradient(center, #ccc, #000); /*ie*/
  background : radial-gradient(center, #ccc, #000); /*none*/
}	

径向渐变和线性渐变一样,也有浏览器兼容性问题,只要把线性渐变的linear改成radial就能变成径向渐变了。

当然径向渐变也有其他的用法,和线性渐变最大的不同就是它能够实现椭圆渐变。

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>线性渐变和径向渐变</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="ellipseRadial"></div>
  <div class="multiRadial"></div>
</body>	
check the result

css:

.ellipseRadial {
  width : 200px;
  height : 100px;
  background : -moz-radial-gradient(center, ellipse, #ccc, #000);
  background : -webkit-radial-gradient(center, ellipse, #ccc, #000);
  background : -ms-radial-gradient(center, ellipse, #ccc, #000);
}
.multiRadial {
  width : 400px;
  height : 400px;
  background : -moz-radial-gradient(center, red, blue, green, pink, black);
  background : -webkit-radial-gradient(center, red, blue, green, pink, black);
  background : -ms-radial-gradient(center, red, blue, green, pink, black);
}	

和线性渐变类似,这里不赘述了。

当然,渐变还有一些其他的用法,比如设置径向渐变的圆心呀,等等。但是这些用法不是对每一个浏览器都适用的,甚至一些主流的浏览器也不行,所以这里就不介绍啦。况且这些渐变就足够我们用啦!

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录