Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第12讲次 任务13 阴影与渐变属性.docx

教案

序号：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