DIV+CSS网页制作实战第29次课(2课时)CSS滤镜.pptxVIP

课次 29 课时 2 教具 投影仪 项目 项目3 网页外观制作技术 任务 任务3.4 CSS滤镜及其应用 知识点 掌握 alpha、blur、chroma、dropshadow、fliph、flipv、glow、grayscale、invert、light、mask、shadow、wave、gradient 等 CSS 滤镜功能及其用法。 重点 alpha、fliph、flipv、grayscale、wave、gradient 等 CSS 滤镜 难点 dropshadow、glow、shadow、wave 等 CSS 滤镜 备注 上机操作90分钟 / 9 1 / 9 2 知识技能目标 掌握 alpha、blur、chroma、dropshadow、fliph、flipv、glow、grayscale、invert、light、mask、shadow、wave、gradient 等 CSS 滤镜功能及其用法。 / 9 3 3．2．7 CSS 滤镜 CSS滤镜是微软为增强浏览器功能而开发并整合在IE浏览器中的一类功能的集合，它并不是CSS标准，但由于IE浏览器使用较广，所以CSS滤镜被广泛使用。现在其他一些浏览器也推出了基于自身的某些滤镜，以增强显示效果。 使用CSS滤镜，可以使文字产生类似图片的效果，但占用空间却小得多，显示速度也较快，日后修改也方便。CSS滤镜标识符是“filter”，格式如下： filter：滤镜属性（属性参数） 其中，滤镜属性包括alpha、blur、chroma等多种，属性参数则决定了滤镜的显示效果。 滤镜分基本滤镜和高级滤镜两种，基本滤镜可以直接作用在对象上，高级滤镜需要配合JavaScript等脚本语言，从而产生更多的变幻效果，主要包括BlendTrans（渐隐变换）、RevealTrans（变换）、Light（灯光）等。 / 9 4 例如下面的代码对第二张图片使用了alpha滤镜，显示效果如图所示： html headtitlealpha滤镜/title style .alpha { filter:alpha(opacity=50); opacity: 0.5; /*谷歌有效*/ } /style /head body img src=images/bj.jpg nbsp; img src=images/bj.jpg class=alpha /body /html / 9 5 关于CSS滤镜其它属性的使用，可以参考下表。值得注意的是，现在CSS 3.0的一些新增属性也能够实现滤镜显示的效果。 / 9 6 / 9 7 / 9 8 3．2．8 任务实施 1．任务场景 对网站首页中的各种页面元素进行外观显示的样式控制。   2．操作环境 Windows 7、Dreamweaver   3．操作步骤 （1）对页面中加入的文本进行样式设置； （2）对页面中加入的图片进行样式设置； （3）对页面中加入的超级链接进行样式设置； （4）对页面中加入的DIV进行定位布局； （5）使用滤镜设置页面效果，如彩色页面和黑白灰页面切换； / 9 9 4．课堂练习 （1）编写HTML和CSS代码在页面中显示以下结构的DIV布局。 提示：外层容器box的宽度为1003px，box1、box2、box6的宽度为1002px，box3、box4、box5的宽度为329px。