HTML+CSS+JavaScript第六章幻灯片.pptVIP

图6-9 设置模糊效果 6.3.3 Chroma Chroma滤镜用来将一个元素中的指定颜色设为透明色，其语法格式如下： filter:Chroma(Color=color) Color是指需要设为透明的颜色值，其属性值可以是关键字或RGB值。 【例6-8】 定义样式.p1将颜色值为#00CC00的颜色均设为透明色，定义样式.p2将颜色值# CC0000的颜色设为透明色。样式代码如下： .p1{filter:Chroma(Color=#00CC00)} .p2{filter:Chroma(Color=#CC0000)} 网页中的元素应用这些样式后，在浏览器中的显示效果如图6-10所示。 图6-10 设置透明色 6.3.4 Shadow和DropShadow Shadow和DropShadow滤镜都可以用来设置目标元素的投影效果，二者在效果和语法格式上稍有不同。Shadow的投影是从原始元素延伸出的投影，而Dropshadow的投影距原始元素有一定的位移效果。Shadow和Dropshadow滤镜的语法格式分别如下： filter:Shadow(Color=color, Direction= direction) filter: DropShadow(Color=color, OffX=offx, OffY=offy, Positive=positive) 6.3.4 Shadow和DropShadow 在这两个滤镜中都使用到的Color表示投影的颜色；Shadow中的Direction表示投影的方向，其用法与Blur属性中的参数Direction的概念相同；DropShadow中的OffX表示横向偏离值；OffY表示纵向偏离值；Positive可以选择1或0，其中1表示为非透明像素建立可见的投影，0表示为透明像素部分建立可见的投影。 【例6-9】 定义样式.p1和样式.p2分别用Shadow和DropShadow滤镜设置目标元素的投影效果。样式代码如下： .p1{filter: Shadow(Color=“#6699CC”,Direction =“45”)} .p2{filter:DropShadow(Color=“#6699CC”,OffX=“5”,OffY=“5”,Positive=“1”)} 网页中的元素应用这些样式后，在浏览器中的显示效果如图6-11所示。 图6-11 设置投影效果 6.3.6 FlipH和FlipV FlipH滤镜用于设置对象的水平翻转效果，FlipV滤镜用于设置对象的垂直翻转效果。这两个滤镜的语法格式分别如下： filter:FlipH filter:FlipV FlipH和FlipV的属性比较简单，不需要对参数进行赋值，直接使用该属性即可实现目标元素的翻转效果。 【例6-10】 定义样式.p1和样式.p2分别用FlipH和FlipV设置目标元素水平翻转和垂直翻转的效果。样式代码如下： .p1{filter:FlipH} .p2{filter:FlipV} 使用FlipH和FlipV属性设置图片翻转的效果如图6-12所示。 图6-12 设置翻转效果 6.3.7 Glow属性 Glow属性用来为对象的外边界增加光效，形成类似发光的效果。其语法格式如下： filter:Glow(Color=color,Strength=strength) 其中，Color用于设置发光颜色，Strength用于设置发光强度，强度值范围从0～255。 【例6-11】 设置样式.p1用Glow滤镜设置目标元素边界光效颜色和强度，实现类似发光的效果。样式代码如下： .p1{filter:Glow(Color=#6699CC,Strength=5)} 网页中的元素应用.p1样式后，在浏览器中的显示效果如图6-13所示。 图6-13 设置发光效果 本章小结 本章介绍了CSS的一些高级应用，包括列表、定位和CSS滤镜效果。这些高级应用实现的显示效果通常是无法通过HTML标签实现的。其中，CSS中的定位属性为网页设计提供了新的页面布局方法，而滤镜则通过CSS实现了类似于图像处理的多种显示效果。 习题6 填空题 1.利用CSS中的___________属性可以实现用图片作为列表符号。 2.对于CSS中的z-index属性，数值越______，叠放层次越高。 3.在网页制作中，如果要实现图片的透明渐变效果，除了可以利用图像处理软件处理图片外，还可以使用CSS中的___________滤镜来实现。 4.在CSS中，可以使用___________滤镜来将一个元素中的指定颜色设为透明色。 操作题 将一篇文章制作成一个网页，要求不同的段落采用不同的滤镜效果，文章中的插图要求使用设置透明色和翻转效果进行滤镜特效处理。 第6章 CSS