CSS3边框与阴影课程内容概述及教学安排.pdfVIP

CSS3Section2Bordersand

Shadows

(Time110min)

1Pre-classspeech（25min)

2CourseReview（5min)

3Introductionandoverviewofnewsons（5

min)

4NewsonContent（70min)

4.1CSS3Border（35min)

4.1.1Roundedborder

4.1.2Multi-colorborders

4.1.3Imageborder

4.1.4CSS3borderexercise（10min)

4.2CSS3Shadow（25min)

4.2.1Textshadow

4.2.2Boxshadow

4.2.3CSS3ShadowExercise（10min)

5CourseSummary（4min)

6assignment（1min)

7FAQnotes

CSS3第二节边框与阴影

课前（无PPT）建议时间：25min

课程回顾（PPT2）建议时间：5min

本节代码示例

1)进行课程提问，回顾刚才讲过的选择器内容。“”

新课导入与概述（PPT3-4）建议时间：5min

1)利用网页效果图进行课程的导入，让学生思考需要使用哪些知识实现效果，会哪些难点。

大家觉得这是photoshop做出来的还是一个网页？（提问，学生回答）认为以已经学过的知

识实现这个效果，有哪些难点？（提问，学生回答）（外发光文字、透明背景、盒阴影、倒影、渐变、倾

斜、圆角）

2)阐述学习目标：用HTML和CSS的代码实现网页效果。

3)阐述课程主体内容（内容概要详见PPT）。

新课内容——边框（PPT5-18）建议时间：25min

本节代码示例

1)让学生对效果图进行思考，阐述与原来三层嵌套的知识相比，圆角边框的优势，引出课程内容，

阐述边框一节的学习目标（学习目标详见PPT）。

在大图中我们看到的圆角效果，可以使用三层嵌套的知识实现，但是，三层嵌套的代码过于繁杂，CSS3

了更简便快捷的属性供我们使用。除了圆角之外，边框还有一些其他效果。通过对边框的学习，希望大家

能够说出当前浏览器对边框属性的支持度、在实际的网页编写过程中能够灵活的进用、实现一些漂亮的效

果。

圆角边框（PPT6-7）

1)讲授圆角边框的属性名（border-radius），让学生思考题目中哪些效果是由圆角实现的。

2)带领学生分析A、C、D、E四个效果。回顾学过的margin和padding属性特点，总结圆角边

框的设置顺序和缩写方式。

观察A、C、D、E这四个效果。我们可以发现圆角边框的四个角的样式可以单独进行设置。那么四个圆角