渐变属性
线性渐变
概念：线性渐变，指的是在一条直线上进行的渐变。在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色
语法：
background:linear-gradient(渐变角度，开始颜色，结束颜色);
渐变角度
线性渐变的“渐变角度”取值有两种：
-
一种是使用角度（单位为deg)
-
另一种是使用关键字。
关键字取值
| 属性值 | 对应角度 | 说明 |
|---|---|---|
| to top | 0deg | 从下到上 |
| to bottom | 180deg | 从上到下（默认值） |
| to left | 270deg | 从右到左 |
| to right | 90deg | 从左到右 |
| to top left | 无 | 从右下角到左上角（斜对角） |
| to top right | 无 | 从左下角到右上角（斜对角） |
注意：未设置渐变角度时，会默认为“180deg”，等同于“to bottom”。
方向图表
颜色值
“开始颜色”表示起始颜色，“结束颜色”顾名思义表示最后一个颜色值。
开始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用英文逗号“,”隔开
实例
<!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(渐变形状 圆心位置,开始颜色,结束颜色)；
属性值
- 渐变形状：可选值，表示用于定义形状大小
- 圆心位置：可选值，表示用于定义圆心位置
- 开始颜色：必选值，用于定义起始颜色
- 结束颜色：必选值，用于定义结束颜色
说明：圆心位置和渐变形状都是可选值。如果省略，则表示采用默认值。开始颜色和结束颜色都是必选值，可以有多个颜色值
圆心位置
圆心位置用于定义径向渐变的“中心位置"，可以使用“at"加上关键词或参数值来定义径向渐变的圆心位置。取值跟background-position属性取值一样。
常用取值有两种：一种是“长度值”(如10px),另一种是“关键字(如top)”.
| 属性值/关键字 | 说明 |
|---|---|
| 像素值/百分比 | 圆心的水平和垂直坐标，可以为负值 |
| 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>
运行结果
