知识目标
- 理解背景渐变的概念和作用
- 掌握背景渐变样式属性的语法与使用
- 理解阴影效果的原理和应用场景
- 掌握阴影样式属性的语法与使用
1. 背景渐变
1.1 线性渐变
运用CSS3中的“background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。
设置线性渐变效果的的语法格式:
/* linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。*/
/* 渐变角度按照顺时针方向测量
0deg：表示从下往上的渐变方向；
90deg:表示从左往右的渐变方向；
180deg：表示从上往下的渐变方向；
270deg：表示从右往左的渐变方向；*/
background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
1.2 径向渐变
运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果。
设置径向渐变效果的语法格式：
/* radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。*/
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
渐变形状：用来定义径向渐变的形状。
渐变形状取值说明：
- 像素值/百分比：用于定义形状的水平和垂直半径，例如“80px 50px”即表示一个水平半径为80px，垂直半径为50px的椭圆形。
- circle：指定圆形的径向渐变。
- ellipse：指定椭圆形的径向渐变。
圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数 值来定义径向渐变的中心位置。
圆心位置取值说明：
- 像素值/百分比：用于定义圆心的水平和垂直坐标，可以为负值。
- left：设置左边为径向渐变圆心的横坐标值。
- center：设置中间为径向渐变圆心的横坐标值或纵坐标。
- right：设置右边为径向渐变圆心的横坐标值。
- top：设置顶部为径向渐变圆心的纵标值。
颜色值参数说明：
“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用**“,”**隔开。
2. 盒子阴影
在CSS3中，运用box-shadow属性可以直接为页面模块添加阴影效果。
2.1 box-shadow属性的基本语法格式及参数值介绍:
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow：必需，代表水平阴影的位置。正值使阴影在元素右侧，负值使阴影在元素左侧。
- v-shadow：必需，代表垂直阴影的位置。正值使阴影在元素下方，负值使阴影在元素上方。
- blur：可选，代表阴影的模糊程度，值越大阴影越模糊。
- spread：可选，代表阴影的扩展程度，正值使阴影扩大，负值使阴影缩小。
- color：可选，代表阴影的颜色。可以使用颜色名称、十六进制值、RGB 或 RGBA 值等。
- inset：可选，若有此值，阴影会变为内阴影。
2.2 案例演示
