资源描述:
《CSS滤镜的使用课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第11章CSS滤镜的使用11.1静态滤镜11.1.1透明滤镜11.1.2模糊滤镜11.1.3基色滤镜11.1.4落影滤镜11.1.5光晕滤镜11.1.6光照滤镜11.1.7翻转滤镜11.1.8X光滤镜11.1.9运动模糊滤镜11.1.10阴影滤镜11.1.11波浪滤镜11.1.12图片插入滤镜11.1.13渐变滤镜11.1.14浮雕滤镜11.1.1透明滤镜透明滤镜可以用于对网页的层次效果进行渲染。设置透明滤镜后,标签的颜色会变浅,并且处于底层的标签的颜色和轮廓会显现出来。透明滤镜(Alpha滤镜)的使用方法如下:filter:progid:
2、DXImageTransform.Microsoft.Alpha(enabled=true
3、false,style=value,opacity=value,finishOpacity=value,startX=value,startY=value,finishX=value,finishY=value);11.1.2模糊滤镜模糊滤镜可以对清晰的含有图片或文字的标签进行模糊化,会呈现出颜色减淡、轮廓不清、区域难以区分的效果。模糊滤镜(Blur滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft
4、.Alpha(enabled=true
5、false,makeShadow=true
6、false,pixelRadius=value,shadowOpacity=value);11.1.3基色滤镜基色滤镜可以将标签进行灰度化、透明化以及翻转处理。基色滤镜(BasicImage滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft.BasicImage(enable=true
7、false,grayScale=0
8、1,mirror=0
9、1,opacity=value,Xray=0
10、1);11.1.4
11、落影滤镜通过落影滤镜可以设置标签的阴影效果,包括阴影的颜色、位置等属性,落影滤镜(DropShadow滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft.DropShadow(enabled=true
12、false,color=value,offX=value,offY=value,positive=true
13、false);11.1.5光晕滤镜通过光晕滤镜可以设置标签文字和边框的光晕效果,包括光晕的颜色以及光照范围,光晕滤镜(Glow滤镜)的使用方法如下:filter:progid:DXIm
14、ageTransform.Microsoft.Glow(enabled=true
15、false,color=value,strength=value);11.1.6光照滤镜通过光照滤镜可以给标签设置光照效果,通过设置相应的属性值可以出现探照灯效果、暗淡光照效果、全辐射光照效果。光照滤镜(Light滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft.Light();11.1.7翻转滤镜所谓的翻转滤镜,顾名思义就是可以对标签的文字和图片进行翻转设置,包括水平翻转滤镜以及竖直翻转滤镜。水平翻转滤镜
16、(FlipH滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft.FlipH();竖直翻转滤镜(FlipV滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft.FlipV();11.1.8X光滤镜使用了X光滤镜后会出现类似于X光照射物体后得到的照片的效果,就像医院使用X光来为病人拍照得到的照片一样。X光滤镜(Xray滤镜)的使用方法如下:filter:Xray();11.1.9运动模糊滤镜运动模糊滤镜的效果是在标签上添加某个方向的移动路径的线
17、条那样,给人看上去有种运动的效果,就像是相机对运动的物体拍照后的效果一样。运动模糊滤镜(MotionBlur滤镜)的使用方法如下:filter:progid:DXImageTransform.Microsoft.MotionBlur(enabled=true
18、false,add=true
19、false,direction=value,strength=value);11.1.10阴影滤镜通过阴影滤镜设置可以渲染出颜色渐变的阴影效果,可以设置阴影的颜色、方向以及范围来呈现不同的效果。阴影滤镜(Shadow滤镜)的使用方法如下:filter:pr
20、ogid:DXImageTransform.Microsoft.Shadow(enabled=true
21、false,color=value,direction=value,str