Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务13-阴影与渐变属性课件.pptx

1、任务13 阴影与渐变属性第五单元 盒子模型学习目标径向渐变box-shadow属性box-sizing属性线性渐变掌握Web字体图标重复渐变了解:学习目标任务目标实战演练制作网站广告栏任务目标实战演练制作旅游攻略网知识准备1.box-shadow属性n box-shadow属性：为盒子模型添加阴影效果n 语法规则：box-shadow：像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型；参数值说明像素值1必需。阴影的水平偏移量。正值阴影在右，负值阴影在左。像素值2必需。阴影的垂直偏移量。正值阴影在下，负值阴影在上。像素值3可选。阴影的模糊半径。只能为正值。值越大，阴影越模糊。像素值4可选

2、。阴影的扩展半径。正值阴影扩大，负值阴影缩小。颜色值可选。阴影的颜色。阴影类型可选。外阴影(outset)或内阴影(inset)。知识准备示例：box-shadow属性 div width:200px;height:200px;margin:10px auto;border:1px solid#000;#box box-shadow:5px 5px 10px 2px#999;/*水平阴影位置，垂直阴影位置，阴影模糊半径，阴影扩展半径，阴影的颜色;*/box-shadow:5px 5px 10px 2px#999,5px 5px 10px 2px#999 inset;知识准备2.box-sizi

3、ng属性n box-sizing属性：定义盒子的宽度值（width）或高度值（height）是否包含元素的边框和内边距。content-box：定义盒子的宽度值（width）或高度值（height）时，不包含元素的边框和内边距。border-box：定义盒子的宽度值（width）或高度值（height）时，包含元素的边框和内边距。知识准备示例：box-sizing属性 div width:230px;height:80px;margin:10px auto;border:4px solid#000;padding:10px;#box1 box-sizing:content-box;#box2

4、box-sizing:border-box;box1:content-box box2:border-box知识准备3.线性渐变n 线性渐变：起始颜色会沿着一条直线按顺序过渡到结束颜色n 语法规则：background-image:linear-gradient(渐变角度,颜色值1 起始位置,颜色值2 起始位置,颜色值n 起始位置);渐变角度：取值范围是0360deg，to top（从下到上，0deg），to left（从右到左，270deg）,to right（从左到右，90deg）,to bottom（从上到下，180deg）。起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值

5、。知识准备示例：线性渐变 div width:200px;height:200px;margin:10px auto;border:1px solid#000;background-image:linear-gradient(to right,#F00,#0F0);background-image:linear-gradient(90deg,#F00,#0F0 50%,#00F 80%);知识准备4.径向渐变n 径向渐变：起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。n 语法规则：background-image:radial-gradient(渐变形状 圆心位置,颜色值1 起始

6、位置,颜色值2 起始位置,颜色值n 起始位置);渐变形状：水平和垂直半径的像素值或百分比，circle或ellipse。圆心位置：定义元素渐变的中心位置，at center、at left/right、at top/bottom、at 像素值/百分比。起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。知识准备示例：径向渐变 div width:200px;height:200px;margin:10px auto;border:1px solid#000;background-image:radial-gradient(circle at center,#F00 20%,#0F0

7、 60%,#00F 80%);知识准备5.重复渐变n 重复渐变：让线性渐变或者径向渐变重复执行。n 注意：只有当首尾两颜色位置不在0%或100%时，重复渐变才生效。（1）重复线性渐变background-image:repeating-linear-gradient(渐变角度,颜色值1 起始位置,颜色值2 起始位置,颜色值n 起始位置);（2）重复径向渐变 background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色 值1 起始位置,颜色值2 起始位置,颜色值n 起始位置);知识准备示例：重复线性渐变 div width:200px;heigh

8、t:200px;margin:10px auto;border:1px solid#000;background-image:repeating-linear-gradient(90deg,#F00,#0F0 20%,#00F 35%);div width:200px;height:200px;margin:10px auto;border:1px solid#000;background-image:repeating-radial-gradient(circle at 50%50%,#F00,#0F0 15%,#00F 25%);知识准备示例：重复径向渐变 知识准备6.Web字体图标n W

9、eb字体图标：替代图片图标，矢量。字体图标小，下载速度快。n 图标工具：font-awesome，开源免费n 使用方法：第一步：在“https:/ 使用方法：第二步：将字体文件夹“fonts”和css文件“font-awesome.min.css”拷贝到站点目录下。注意：“font-awesome.min.css”文件必须要放在css文件夹中。第三步：使用web字体图标。在网页中链接引入font-awesome.min.css文件，使用标签定义字体图标，并通过class属性定义不同的字体，例如“”。（每个图标都有相应的class，可以在http:/fontawesome.io/icons/网页

10、上查看。）web字体图标 .fa-apple font-size:3em;color:#F00;知识准备示例：web字体图标 实战演练案例描述：设计并制作网站广告栏，网页效果和布局图如下。制作网站广告栏强化训练案例描述：设计并制作旅游攻略网，网页效果和布局图如下。制作旅游攻略网强化训练 当光标移到导航上时，效果如图上所示。当光标移到内容块上时出现阴影效果，如图下所示。制作旅游攻略网任务小结01box-shadow属性02box-sizing属性03线性渐变04径向渐变05重复渐变06Web字体图标课后实训 设计商城首页通道，如图1所示。当鼠标移动到列表项时，图标和文字变成白色，出现如图2所示的效果。（提示：用Web字体图标完成。）图1图2谢谢观看