前端开发_HTML5_CSS部分-渐变

最新推荐文章于 2024-07-09 11:52:47 发布

魔笛手7

最新推荐文章于 2024-07-09 11:52:47 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： css html5 html 渐变线性渐变和径向渐变

本文链接：https://blog.csdn.net/u013185175/article/details/122017493

版权

前端专栏收录该内容

75 篇文章 9 订阅

订阅专栏

渐变

1.引入

上一小节课程我们说到了阴影，这一节课我们讲解一下一种比较特殊的效果:渐变

2.渐变概述

渐变背景是一种网页中比较特殊的视觉元素，一直以来都是通过设置背景图片来实现渐变的，但是随着W3C组织将渐变的效果设置收入到CSS3标准中之后，就可以通过样式设计出渐变的效果，这样一来就加快的网页的相应速度。

3.渐变的种类:线性渐变和径向渐变

4.线性渐变

(1)、线性渐变概述:线性渐变是指指向一个方向的渐变，需要一个起始点和一个方向的渐变效果。

(2)、线性渐变相关语法以及参数说明

线性渐变的语法以及参数说明

background：linear-gradient(<angle> || <derection>,<color-stop>,<color-stop>...)

参数:

参数1:
   angle:通过指定一个角度来确定渐变的方向。这一个指定的角度是指:垂直线和渐变线之间的夹角角度。即以 
         垂直线作为0度角的起始位置。

  derection:通过代表方向的关键词来确定渐变的方向。一般方向的关键词有:top、right、left、bottom

参数2：指定渐变的开始颜色
参数3: 指定渐变的结束颜色
.... : 可以指定其他的渐变颜色，这一个时候中间就会产生不同的渐变效果。

(3)、线性渐变的相关代码实现以及实现效果

<style type="text/css">
   div {
	  font-size: 25px;
	  font-family: "宋体";
	  color: red;
	  border: 1px solid black;
	  height: 200px;
	  width: 200px;
	  float: left;
	  margin-left: 50px;
	  text-align: center;
	}

    .box1 {
	   background: linear-gradient(45deg,red,black);
	}

	.box2 {
	   background: linear-gradient(to bottom,green,black);
	}
	.box3 {
	   background: linear-gradient(to bottom,green,white,red);
	}
    .box4 {
	   background: linear-gradient(to bottom,green 80%,white,red);
	}
</style>

<body>
       <div class="box1">
			指定角度45°
		</div>
		<div class="box2">
			指定方向从上到下
		</div>
		<div class="box3">
			多种颜色渐变
		</div>
		<div class="box4">
			设置渐变的位置比例
		</div>
	</body>

(4)、重复线性渐变（repeat-linear-gradient）

重复线性渐变是一种比较特殊的线性渐变，它会在所有的方向上重复渐变以覆盖整个容器。下面列举一个相关的实例来查看其效果:

<style type="text/css">
   div {
	   font-size: 25px;
	   font-family: "宋体";
	   color: red;
	   border: 1px solid black;
	   height: 200px;
	   width: 200px;
	   float: left;
	   margin-left: 50px;
	   text-align: center;
   }
		
   .box1{
	   background: repeating-linear-gradient(to right,black,white 10px);
   }
</style>

<body>
    <div class="box1">
	   重复线性渐变
    </div>
</body>

4.径向渐变

(1)、径向渐变概述:径向渐变是指以一个位置为圆心，然后沿着这一个圆的半径渐变的一个过程。

(2)、径向渐变相关语法以及参数说明

径向渐变语法以及参数说明

语法:

background:radial-gradient(<shape> || <size> at <position>,<color_stop>,<color_stop>...);

参数说明:

shape:用于指定径向渐变的形状，主要有两个值:circle(圆形)和ellipse(椭圆)。

 size:主要用于设置渐变半径的大小，从而来确定径向渐变的的结束形状大小，这一个大小可以是数值、百分 
      比、关键字
      关键字:
      closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边。
      farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边。

position:主要用来定义径向渐变的圆心位置。用于确定径向渐变的中心位置，如果参数省略，默认为center.


color_stop：用于指定颜色

值得注意的是这一个地方由于不同的浏览器解析径向渐变的时候会存在语法上的写法不一致，我们需要指定不同的语法格式，下面我们给出两种主流的浏览器Chrome和FireFox的径向渐变的语法格式:

-webkit-radial-gradient //适用于谷歌浏览器

-moz-linear-gradient //适用于火狐浏览器

(3)、径向渐变的相关代码实现以及实现效果

<style type="text/css">
   div {
      font-size: 25px;
	  font-family: "宋体";
	  color: red;
	  border: 1px solid black;
	  height: 200px;
	  width: 300px;
	  float: left;
	  margin-left: 50px;
	  text-align: center;
  }

  .box1 {
	  background: -webkit-radial-gradient(circle,red,black)
  }

  .box2 {
	  background: -webkit-radial-gradient(red,black)
  }
  .box3 {
	  background: -webkit-radial-gradient(60% 55%,closest-side,red,black)
  }
  .box4 {
	  background: -webkit-radial-gradient(farthest-side,red,black,white,green)
  }
</style>
<body>
		<div class="box1">
			圆形渐变
		</div>
		<div class="box2">
			椭圆渐变
		</div>
		<div class="box3">
			指定圆心位置
		</div>
		<div class="box4">
			指定渐变大小
		</div>
	</body>

(4)、重复径向渐变（repeat-radial-gradient）

重复径向渐变是一种比较特殊的线性渐变，它会在半径的方向上重复渐变以覆盖整个容器。下面列举一个相关的实例来查看其效果:

<style type="text/css">
   div {
			font-size: 25px;
			font-family: "宋体";
			color: red;
			border: 1px solid black;
			height: 200px;
			width: 200px;
			float: left;
			margin-left: 50px;
			text-align: center;
		}
		
   .box1{
	        background: -webkit-repeating-radial-gradient(red 2px,black 4px);
	    }
</style>

<body>
	<div class="box1">
		重复径向渐变
    </div>
</body>