CSS3基础超详细分解.ppt

3. Blur 滤镜 Blur滤镜可以产生快速移动的动态模糊效果。Blur滤镜的基本语法如下： style=filter:Blur(add=value,direction=value,strength=value)“ Blur滤镜的参数设置如下表所示。 参数名称 说明 参数值 add 是否要显示原来的对象 0(不显示)、1(显示)。默认值为1，即显示原来的对象。 direction 动态模糊效果的方向 总单位为360°，0代表垂直向上，并以每45°为一个单位，默认值为270°。 strength 动态模糊效果的大小，表示有多少像素的大小会被影响。 以整数来设置，默认值为5px。 其中：参数direction用于设定动态模糊效果的方向，总单位为360°，0代表垂直向上，并以每45°为一个单位，而度数以方向定位时，将如下图所示。 Dropshadow滤镜用于设置对象产生阴影效果。Dropshadow滤镜的基本语法如下： style=filter:Dropshadow(color=#value,offx=value,offy=value,positive=value)“ Dropshadow滤镜的参数设置如下表所示。 4. Dropshadow滤镜 参数名称 说明 参数值 color 设置阴影的颜色 以#rrggbb的格式，或是指定颜 色名称的方式 offx 阴影相对原始对象 的水平方向偏移量 设置值为整数，单位为像素。若 水平往右移，则为正数；若水平 往左移，则为负数。 offy 阴影相对原始对象 的垂直方向偏移量 设置值为整数，单位为像素。若 垂直往下，则为正数；若垂直往 上移，则为负数。 positive 设置阴影的透明度 0:透明；1:不透明 Glow滤镜用于设置对象产生边缘光晕的模糊效果。Glow滤镜的基本语法如下： style=filter:Glow(color=#value，strength=value) Glow滤镜的参数设置如下表所示。 5. Glow滤镜 参数名称 说明 参数值 color 设置边缘光晕的颜色。 以#rrggbb的格式，或是指定颜色名称的方式。 strength 设置边缘光晕的强度大小。 设置值为1～255的整数。 6. Gray、Invert和Xray滤镜 Gray滤镜主要用于将对象中的颜色除去，以变成黑白的效果。 Invert滤镜主要用于将颜色的饱和度以及亮度值完全反转，类似底片效果。 Xray滤镜主要用于让对象显示轮廓加亮，有点类似X光片的效果。 三个滤镜的基本语法如下： style=filter:Gray style=filter:Invert style=filter:Xray 这3个滤镜没有参数。 7. FlipH，FlipV滤镜 FlipH滤镜是设置对象产生水平翻转180°，即左右相反的效果；而FlipV滤镜是设置对象产生垂直翻转180°，即上下颠倒的效果。 这两个滤镜的基本语法如下： style=filter:FlipH style=filter:FlipV 这两个滤镜没有参数。 Wave滤镜主要用于设置对象产生垂直的波浪效果。Wave滤镜的基本语法如下： style=filter:Wave(add=value,freq=value,lightstrength=value,phase=value,strength=value) Wave滤镜的参数设置如下表所示。 8. Wave滤镜 参数名称 说明 参数值 add 是否显示原来的对象。 0:不显示；1:显示。默认值为0。 freq 设置出现在对象上的波浪数目。 以正数设置。 strength 设置波浪的振幅大小。 单位为像素，数值为正整数。 lightstrength 设置波浪上光的照射强度。 0(最弱)～100(最强)。 phase 设置正弦波起始位置。 0～100。(相当于将360°，化分为100个等分)。 * Shadow除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。Shadow滤镜的基本语法如下： style=filter:Shadow(color=#color,direction=value) Shadow滤镜的参数设置如下表所示。 9. Shadow滤镜 参数名称 说明 参数值 color 指定对象中要变为透明的颜色。 以#rrggbb的格式设置，或是指定颜色名称的方式。 direction 设置阴影的方向。 总单位为360°，0代表垂直向上，并以45°为一个单位，其预设为255°。 * Mask滤镜主要用于设置对