新网页设计与Web编程 教学课件 吴黎兵 郝自勉 杨鏖丞 chapter06.pptVIP

6.2.3 用“属性面板”新建内部样式 对所选定的文本“1.《网络安全技术与应用》”，一方面应用.STYLE1定义的“华文隶书”字体属性，另一方面继承了外层标签p和body定义的文本大小、斜体样式和颜色属性。 “CSS面板”上可见该样式为“类”.STYLE1，如右图。 在style type=text/css和/style之间添加了内部样式定义.STYLE1 {font-family: 华文隶书} 注： 6.2.4 套用CSS 对于已经建立的CSS样式，可以套用到选定的对象上。 例:在上列网页中，选定文本“2.《网络安全基础与应用》”，右键单击.STYLE1，选择“套用”，或者在下边“属性面板”的“样式”框里选择STYLE1，则.STYLE1即可应用到选定的文本上。如下图: 6.3 CSS滤镜 CSS的滤镜（filter）属性 glow：加光辉在附近对象的边外。 blur：创建高速度移动效果，即模糊效果。 chroma：制作专用颜色透明。 DropShadow：创建对象的固定影子。 FlipH：创建水平镜像图片。 alpha：设置透明层次 FlipV：创建垂直镜像图片。 Xray：使对象变得像被x光照射一样。 invert：反色 light：创建光源在对象上。 mask：创建透明掩膜在对象上。 shadow：创建偏移固定影子。 gray：把图片灰度化。 wave：波纹效果。 6.3 CSS滤镜 （1）滤镜：Alpha设置透明层次 语法：STYLE=filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY) Style：1或2或3 Opacity：起始值，取值为0～100, 0为透明，100为原图。 StartX/ StartY ：任意值 FinishOpacity：目标值。 说明： 例：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2) 6.3 CSS滤镜 （2）滤镜：blur创建高速度移动效果，即模糊效果 语法：STYLE=filter:Blur(Add = add, Direction = direction, Strength = strength) Strength：效果增长的数值，一般5即可 Add：一般为1，或0 Direction：角度，0～315度，步长为45度 说明： 例：filter:Blur(Add=1,Direction=45,Strength=5) 6.3 CSS滤镜 （3）滤镜：Chroma制作专用颜色透明 语法：STYLE=filter:Chroma(Color = color) color：#rrggbb格式，任意。 说明： 例：filter:Chroma(Color=#FFFFFF) 6.3 CSS滤镜 （4）滤镜：DropShadow创建对象的固定影子 语法：STYLE=filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive) Offy：Y轴偏离值。 Color:#rrggbb格式，任意。 Positive：1或0。 Offx：X轴偏离值。 说明： 例：filter:DropShadow(Color=#6699CC,OffX=5,OffY=5,Positive=1) 6.3 CSS滤镜 （5）滤镜：FlipH创建水平镜像图片 语法：STYLE=filter:FlipH 例：filter:FlipH （6）滤镜：FlipV创建垂直镜像图片 语法：STYLE=filter:FlipV 例：filter:FlipV （14）滤镜：Xray使对象变得像被x光照射一样 语法：STYLE=filter:Xray 例：filter:Xray 1． 6.3 CSS滤镜 （7）滤镜：glow加光辉在附近对象的边外 语法：STYLE=filter:Glow(Color=color, Strength=strength) Strength：强度(0－100) Color：发光颜色。 FinishOpacity：目标值。 说明： 例： filter:Glow(Color=#6699CC,Strength=5) 6.3 CSS滤镜 （8）滤镜：gray把图片灰度化 语法： STYLE=filter:Gray 例： filter:Gray （9）滤镜：invert反色 语法：STYLE=filter