CSS滤镜-南京大学网络教育学院.PDF

南京大学网络教育学院 1 1 CSS 滤镜 南京大学网络教育学院 2 2 类别 • 视觉滤镜/静态滤镜 – 视觉滤镜应用于网页中图片、文本等元素，可以使之产生透 明、模糊、投影、反转、光晕等视觉效果。 • 过渡滤镜 – 它们应用于当一个元素的可见性（visibility ）改变时或页面 切换时，产生一类如PowerPoint页面切换的过场效果，使用 者可以设置持续时间，使物体产生一种淡入淡出（fade in/fade out ）的效果。 • 界面滤镜 – 界面显示效果（渐变效果） 南京大学网络教育学院 3 3 界面滤镜 • Gradient滤镜 • filter : progid:DXImageTransform.Microsoft.Gradient (startColorStr, EndColorStr=iWidth ) Gradient滤镜 南京大学网络教育学院 4 4 常用静态滤镜列表 滤镜效果 描述 Alpha 设置透明度 Blur 建立模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 建立一种偏移的影象轮廓，即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Gray 降低图片的彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 在一个对象上进行灯光投影 Mask 为一个对象建立透明膜 Shadow 建立一个对象的固体轮廓，即阴影效果 Wave 在X轴和Y轴方向利用正弦波纹打乱图片 Xray 只显示对象的轮廓 南京大学网络教育学院 5 5 格式 •CSS 的静态滤镜属性的标识符是filter 。 filter ：filtername （parameters ） filter : progid:DXImageTransform.Microsoft. Filtername(parameters ） 南京大学网络教育学院 6 6 Alpha 滤镜 描述： 设置可见物体的不透明程度，对象可以为图像或层等级块元素。 语法： { FILTER: Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=