教案
序号：12
授课日期
课时数
4
章节名称
任务13阴影与渐变属性
教学内容
重点
box-shadow属性、线性渐变、径向渐变、Web字体图标。
难点
Web字体图标的使用。
教学目的与要求
掌握使用DIV+CSS布局的方法。
学会使用阴影——box-shadow属性、box-sizing属性。
学会使用渐变属性——线性渐变、径向渐变。
了解重复渐变。
教学方法
与手段
教师采用任务驱动法，使用教学PPT辅助授课。
教师操作演示，学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题，通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
（任务13阴影与渐变属性
13.1box-shadow属性、13.2box-sizing属性、13.3线性渐变）
实操任务目标发布
实战演练——制作网站广告栏
图12-SEQ图\*ARABIC\r11“网站广告栏”网页
强化训练——制作旅游攻略网
图SEQ图\*ARABIC2“旅游攻略网”网页
实操任务目标发布
box-shadow属性
box-shadow属性：为盒子模型添加阴影效果
语法规则：box-shadow：像素值1像素值2像素值3像素值4颜色值
阴影类型；
子任务：
图SEQ图\*ARABIC3box-shadow属性图SEQ图\*ARABIC4多重阴影效果
box-sizing属性
box-sizing属性：定义盒子的宽度值（width）或高度值（height）是否包含元素的边框和内边距。
content-box：定义盒子的宽度值（width）或高度值（height）时，不包含元素的边框和内边距。
border-box：定义盒子的宽度值（width）或高度值（height）时，包含元素的边框和内边距。
图SEQ图\*ARABIC5box-sizing属性
线性渐变
线性渐变：起始颜色会沿着一条直线按顺序过渡到结束颜色
语法规则：background-image:linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
渐变角度：取值范围是0~360deg，totop（从下到上，0deg），toleft（从右到左，270deg）,toright（从左到右，90deg）,tobottom（从上到下，180deg）。
起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。
图12-SEQ图\*ARABIC6线性渐变图12-SEQ图\*ARABIC7线性渐变效果
第二学时
（任务13阴影与渐变属性
13.4径向渐变、13.5重复渐变、13.6Web字体图标）
知识准备
径向渐变
径向渐变：起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。
语法规则：background-image:radial-gradient(渐变形状圆心位置,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
渐变形状：水平和垂直半径的像素值或百分比，circle或ellipse。
圆心位置：定义元素渐变的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。
起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。
图12-SEQ图\*ARABIC8径向渐变
重复渐变
重复渐变：让线性渐变或者径向渐变重复执行。
注意：只有当首尾两颜色位置不在0%或100%时，重复渐变才生效。
（1）重复线性渐变
background-image:repeating-linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
图12-SEQ图\*ARABIC9重复线性渐变
（2）重复径向渐变
background-image:repeating-radial-gradient(渐变形状圆心位置,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
图12-SEQ图\*ARABIC10重复径向渐变
Web文字图标
Web字体图标：替代图片图标，矢量。字体图标小，下载速度快。
图标工具：font-awesome，开源免费
使用方法：
第一步：在“/FortAwe