18-背景渐变与阴影（CSS3）

知识目标

• 理解背景渐变的概念和作用
• 掌握背景渐变样式属性的语法与使用
• 理解阴影效果的原理和应用场景
• 掌握阴影样式属性的语法与使用

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 案例演示