CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。

最新推荐文章于 2024-09-11 05:02:21 发布

xqiitan

最新推荐文章于 2024-09-11 05:02:21 发布

阅读量9.6k

点赞数 12

分类专栏： h5 CSS

本文链接：https://blog.csdn.net/xqiitan/article/details/88291589

版权

h5 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

CSS

27 篇文章 0 订阅

订阅专栏

CSS3中的渐变实现（线性渐变、径向渐变）
CSS3中的background新增属性实现，常见页面效果。
CSS3中的图片边框的基本用法
CSS3中的transition属性，实现过渡效果。
CSS3中的transfrom属性，实现 2d变换效果。

渐变：是css3中比较丰富多彩的一个特性，通过渐变可以实现许多绚丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可拓展性。可分为线性渐变、径向渐变。
1.linear-gradient 线性渐变，指沿着某条直线朝一个方向产生渐变效果。
语法：linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>*])
   第一个参数表示线性渐变的方向，
   1-to left:设置渐变为从右到左。相当于270deg
   2-to right:设置渐变从左到右。相当于90deg。
   3-to top:设置渐变从上到下，相当于0deg。
   4-to buttom:设置渐变从下到上，相当于180deg。这是默认值，也可以直接指定度数，如45度。
   第二个参数，是起点颜色，可以指定颜色的位置。
   第三个参数是重点颜色，捏还可以在后面添加更多的参数，表示多种颜色渐变。

2.radial-gradient: 径向渐变指从一个中心店开始沿着四周产生渐变效果。
语法：<radial-gradient> = radial-gradient([<shape>||<size>][at <position>]?,|[at<position>]?<color-stop>[,<color-stop>]+);
   1- <position>确定圆心的位置，提供2个参数，第一个表示横坐标，第二个表示纵坐标；
   如果只提供一个，第二个默认为50%，即center。
   2- shape：渐变的形状，ellipse表示椭圆，circle表示园型。默认ellipse，
   如果元素形状是正方形的元素，则ellipse和circle显示一样。
   如果宽高不一样，默认效果切换到ellipse。
   3- size：渐变的大小，即渐变从哪里到哪里停止，它有4个值。
   colsest-side:最近边
   farthest-side:最远边
   closet-corner:最近角
   farthest-corner:最远角，默认值。
   4- <color>指定颜色额，rgba或hsla

3. 重复渐变
   repeating-radial-gradient
   repeating-linear-gradient

===============================================

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>渐变效果：线性变化（渐变色）</title>
		<style type="text/css">
			#div01 {
				width: 200px;
				height: 100px;
				/* 添加渐变，渐变不是单一色，产生的是一个图像，所以需要background添加。 */
				/* linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...) */
				/* background: linear-gradient(to right, red, blue ); */
				/* 设置百分比，左边一个颜色，右边一个颜色 */
				background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
			}
			#div02 {
				width: 100px;
				height: 100px;
				margin-top: 10px;
				/* 语法：radial-gradient(形状 大小 坐标 );
				形状shape：circle产生正方形的渐变色；ellipse适配当前的形状。如果是正方形的容器，两者效果一样
				at position:坐标，默认在正中心，可以赋值坐标(相对于左上角)，也可以赋值关键字（left/center/right/top/bottom）
				大小size：colsest-side:最近边
					farthest-side:最远边
					closet-corner:最近角
					farthest-corner:最远角，默认值。
				 */
				/* background: radial-gradient(red, blue); */
				/* background: radial-gradient(circle closest-corner at 50px 50px ,red, blue); */
				/* background: radial-gradient(at left top, red, blue); */
				background: radial-gradient(red, red 50%, blue 50%, blue 100%);
			}

			/* 重复渐变1 */
			#div03 {
				width: 300px;
				height: 300px;
				margin-top: 10px;
				/* background: radial-gradient(#fff 0%, #fff 10%,
					#000 10%, #000 20%,
					#fff 20%, #fff 30%,
					#000 30%, #000 40%,
					#fff 40%, #fff 50%,
					#000 50%, #000 60%,
					#fff 60%, #fff 70%,
					#000 70%, #000 80%,
					#fff 80%, #fff 90%,
					#000 90%, #000 100%); */
				background: repeating-radial-gradient(circle closest-side at center center,
					#fff 0%, #fff 10%,
					#000 10%, #000 20%);
			}
			/* 重复渐变2 */
			#div04 {
				width: 200px;
				height: 200px;
				margin-top: 10px;
				background: repeating-linear-gradient(45deg,
					#fff 0%, #fff 10%,
					#000 10%, #000 20%);
			}
		</style>
	</head>
	<body>
		<div id="div01"></div>
		<div id="div02"></div>
		<div id="div03"></div>
		<div id="div04"></div>
	</body>
</html>