CSS3渐变属性详解_代码007(未授权)

本文介绍: 圆心位置用于定义径向渐变的“中心位置”，可以使用“at”加上关键词或参数值来定义径向渐变的圆心位置。径向渐变是圆形渐变或椭圆渐变，颜色不再是沿着一条直线渐变，而是起始颜色会从一个中心点开始向所有方向渐变。此外，径向渐变可以接收一个值列表，可以同时定义多种颜色的径向渐变，各颜色值之间用英文逗号（参数开始颜色用于定义径向渐变的开始颜色，而参数结束颜色用于定义径向渐变的结束颜色。概念：径向渐变，指的是颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样）。概念：线性渐变，指的是在一条直线上进行的渐变。

概念：线性渐变，指的是在一条直线上进行的渐变。在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色

语法：

background:linear-gradient(渐变角度，开始颜色，结束颜色);

渐变角度

线性渐变的“渐变角度”取值有两种：

属性值	对应角度	说明
to top	0deg	从下到上
to bottom	180deg	从上到下（默认值）
to left	270deg	从右到左
to right	90deg	从左到右
to top left	无	从右下角到左上角（斜对角）
to top right	无	从左下角到右上角（斜对角）

方向图表
在这里插入图片描述

颜色值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性渐变</title>
		<style>
			.main{
				width:600px;
				display:flex;
			}
			div{
				width:100px;
				height:100px;
				margin-left:20px;
			}
			.demo{
				background:linear-gradient(red,yellow);
			}
			.demo1{
				background:linear-gradient(red 70%,yellow);
			}
			.demo2{
				background:linear-gradient(to right,red 70%,yellow);
			}
			.demo3{
				background:linear-gradient(to right bottom,red,yellow);
			}
			.demo4{
				background:linear-gradient(30deg,red,yellow);
			}
			.demo5{
				background:linear-gradient(0deg,red,yellow);
			}
		</style>
	</head>
	<body>
		<div class="main">
		<!-- 默认渐变 -->
		<div class="demo"></div>
		<!--默认情况西，设置红色在元素70%的位置之后开始渐变-->
		<div class="demo1"></div>
		<!--设置一个从左到右的渐变背景色 -->
		<div class="demo2"></div>
		<!-- 创建一个从左上到右下的渐变颜色 -->
		<div class='demo3'></div>
		<!-- 创建一个30度角的线性渐变 -->
		<div class="demo4"></div>
		<!-- 创建一个0度角的线性渐变 -->
		<div class="demo5"></div>
		
		</div>
	</body>
</html>

background:radial-gradient(渐变形状 圆心位置,开始颜色,结束颜色)；

属性值/关键字	说明
像素值/百分比	圆心的水平和垂直坐标，可以为负值
center	中部（默认值）
top	顶部
bottom	底部
left	左部
right	右部
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

属性值	说明
像素值/百分比	渐变形状的水平和垂直半径
ellipse	椭圆形（默认值）
circle	圆形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>径向渐变</title>
		<style>
			.main{
				width:600px;
				display:flex;
			}
			div{
				width:100px;
				height:100px;
				margin-left:20px;
			}
			.demo3{
				width:160px;
				height:100px;
				line-height:200px;
				border-radius:50px 50px ;
			}
			.demo{
				
				background:radial-gradient(red,blue);
			}
			.demo1{
				background:radial-gradient(circle,red,blue);
			}
			.demo2{
				background:radial-gradient(circle,red 5%,blue 20%);
			}
			.demo3{
				background:radial-gradient(circle at center, orange 20%,yellow 50%);
			}
		</style>
	</head>
	<body>
		<div class="main">
		<!-- 创建一个从红色到蓝色的径向渐变 -->
		<div class="demo"></div>
		<!--创建一个真正的圆形渐变 -->
		<div class="demo1"></div>
		<div class="demo2"></div>
		<!-- 创建一个鸡蛋 -->
		<div class="demo3"></div>
		</div>
	</body>
</html>