CSS属性之渐变属性（gradient）

最新推荐文章于 2024-06-20 11:21:40 发布

「已注销」

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量5.5w

点赞数 11

分类专栏： CSS学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/60139494

版权

CSS学习笔记专栏收录该内容

13 篇文章 3 订阅

订阅专栏

渐变分为线性渐变和径向渐变，所谓渐变就是几种颜色之间的平稳过渡。

线性渐变

线性渐变（linear-gradient）

实现线性渐变，你至少需要定义两种颜色的结点，这两种结点就是你想平稳过渡的颜色，即：其中一种颜色结点为起点，另一种颜色结点为结束点。

书写：

background: linear-gradient(color1,color2);

color1为起点结点，color2为结束点结点。

同时也可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，或者从右至左渐变，默认情况下是从上至下渐变的。

书写：

background: linear-gradient(direction,colro1,color2);

direction表示渐变的方向，此值直接写方向的起点即可，如：渐变方向为从左至右，直接写left即可，渐变方向为从下至上，直接写bottom即可。

当然也可以对角渐变，如：从左上角到右下角，书写为background: linear-gradient(left top,color1,color2);

默认渐变方向是从上至下渐变：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
		background: -webkit-linear-gradient(red,blue);
		background: -o-linear-gradient(red,blue);
		background: -moz-linear-gradient(red,blue);
		background: -mos-linear-gradient(red,blue);
		background: linear-gradient(red,blue);
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

效果如下：

现在定义渐变方向为从右至左：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
		background: -webkit-linear-gradient(right,red,blue);
		background: -o-linear-gradient(right,red,blue);
		background: -moz-linear-gradient(right,red,blue);
		background: -mos-linear-gradient(right,red,blue);
		background: linear-gradient(right,red,blue);
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

效果如下：

对角渐变--右下角至左上角：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
		background: -webkit-linear-gradient(left bottom,red,blue);
		background: -o-linear-gradient(left bottom,red,blue);
		background: -mos-linear-gradient(left bottom,red,blue);
		background: -moz-linear-gradient(left bottom,red,blue);
		background: linear-gradient(left bottom,red,blue);
		
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

效果如下：

对角渐变--右下角到左上角：

div {
	    width: 400px;
		height: 200px;
		background: -webkit-linear-gradient(right bottom,red,blue);
		background: linear-gradient(right bottom,red,blue);	
	  }

效果如下：

角度渐变

如果还想更多地控制渐变方向，可以改变渐变的角度。

书写：

background: linear-gradient(angle,color1,color2);

角度是指水平线与渐变线之间的角度，是逆时针的。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
		background: -webkit-linear-gradient(0deg,red,blue);
		background: linear-gradient(0deg,red,blue);	
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

渐变时，也可以使用多个颜色。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
		background: -webkit-linear-gradient(left,red,blue,yellow,orange);
		background: -o-linear-gradient(left,red,blue,yellow,orange);
		background: -mos-linear-gradient(left,red,blue,yellow,orange);
		background: -moz-linear-gradient(left,red,blue,yellow,orange);
		background: linear-gradient(left,red,blue,yellow,orange);
		
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

效果如下：

在渐变中使用透明度

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
        background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
        background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); 
        background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); 
        background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 		
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

效果如下：

重复的线性渐变

repeat-linear-gradient函数用于创建重复的线性渐变

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>渐变(gradients)属性</title>
	<style>
	
	  div {
	    width: 400px;
		height: 200px;
        background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
        background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
        background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
        background: repeating-linear-gradient(red, yellow 10%, green 20%);	
	  }
	
	</style>
  </head>
  <body>
    
    <div></div>
	 
  </body>
</html>

效果如下：

径向渐变

径向渐变是由中心向外渐变的。可以定义它中心(默认渐变是中心是center)、形状（原型或者椭圆形）、大小等。

书写：background: radial-gradient(center,size,start-color,last-color);

均匀渐变：

div {
	    width: 400px;
		height: 200px;
        background: -webkit-radial-gradient(red, yellow, green);    
	  }

效果如下：

以上是均匀渐变，也可以是非均匀渐变，改变渐变颜色的比例就行；还有重复渐变也是可以的。

对于ie6~ie9渐变兼容问题：

对于ie6~ie9是不支持渐变属性的，使用滤镜来代替渐变，实现渐变的效果。

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='rgba(246,237,237,0)',endColorstr='rgba(246,237,237,0)'); /* 针对IE的渐变，使用滤镜的实现。 */

其中：GradientType定义渐变的方式，属性值为"1"，表示水平方向上的渐变，属性值为"0"，表示垂直方向上的渐变。

对于ie9，单独处理滤镜：

:root{filter:noen}