网页制作基础教程 牛永洁 延安大学计算机学院
网页制作基础教程 延安大学计算机学院 牛永洁
内容提要 ☆本章主要学习内容 ※CSS中滤镜的使用
内容提要 ❖本章主要学习内容 CSS中滤镜的使用
滤镜 令滤镜可以对网页中的文字或者图片进行一些特效 的处理,能够增加网页的美观效果。 ◆滤镜一般应用在已知大小的元素上,而且一般应 用于图片
滤镜 ❖滤镜可以对网页中的文字或者图片进行一些特效 的处理，能够增加网页的美观效果。 ❖滤镜一般应用在已知大小的元素上，而且一般应 用于图片
滤镜的格式 cSs的滤镜格式:两部分组成一选择器+声明块 一个声明 Img flte:果(参数=值)‖}
滤镜的格式 filter:效果(参数=值) img 选择器 { } 一个声明 CSS的滤镜格式：两部分组成---选择器+声明块
1.不透明度 alpha 1.使用格式fter: alpha(参数1=值参数2=值 匚参数 说明 opacity 不透明度的设置,100完全不透明,0完全透 明 style 指出渐进的形状,0无渐进,1直线渐进,2圆 形渐进,3矩形渐进 startx 设置开始渐迸进的横坐标,作为对象宽度的百分 style=1 starty 设置开始渐进的纵坐标,stye=1 finish 设置渐进结束的横坐标, style=1 mny设置渐进结束的纵坐标sy|1 finishopacity设置渐进结束的透明度
1.不透明度alpha 1. 使用格式filter:alpha(参数1=值,参数2=值…) 参数 说明 opacity 不透明度的设置，100完全不透明，0完全透 明 style 指出渐进的形状，0无渐进，1直线渐进，2圆 形渐进，3矩形渐进 startx 设置开始渐进的横坐标，作为对象宽度的百分 比，style=1 starty 设置开始渐进的纵坐标, style=1 finishx 设置渐进结束的横坐标, style=1 finishy 设置渐进结束的纵坐标, style=1 finishopacity 设置渐进结束的透明度
2.动感模糊bur 1.使用格式 filter blur(参数1=值参数2=值) 匚参数 说明 add True、 false direction 用来设置模糊的参数,顺时针以45度为单位进 行积累 strength 整数值,表示有多少个像素受影响,默认为5
2.动感模糊blur 1. 使用格式filter:blur(参数1=值,参数2=值…) 参数 说明 add True、false direction 用来设置模糊的参数，顺时针以45度为单位进 行积累 strength 整数值，表示有多少个像素受影响，默认为5
3.对颜色的透明处理 chroma 1.使用格式fter: chroma(参数1=值,参 数2=值) 2.将图片中指定的颜色变为透明
3.对颜色的透明处理chroma 1. 使用格式filter: chroma(参数1=值,参 数2=值…) 2. 将图片中指定的颜色变为透明
4阴影敛果 drop shadow 令可以为图像设置阴影效果 drop shadow滤镜的参数 参数 说明 color 设置阴影的颜色 off 设置阴影相对于图像移动的水平距离 offy 设置阴影相对于图像移动的垂直距离 positive 0或者1,0为透明像素生成阴影,1为不透 明像素生成阴影
4.阴影效果dropShadow ❖可以为图像设置阴影效果 dropShadow滤镜的参数 参数 说明 color 设置阴影的颜色 offX 设置阴影相对于图像移动的水平距离 offY 设置阴影相对于图像移动的垂直距离 positive 0或者1,0为透明像素生成阴影，1为不透 明像素生成阴影
5对象翻转pH,fipV=示 1.使用格式fter:fipH水平翻转 2. filter:fip∨垂直翻转
5.对象翻转flipH，flipV 1. 使用格式filter: flipH水平翻转 2. filter: flipV 垂直翻转
6.发光数果goW 1.使用格式fter:goW参数1值,参数2=值..) 参数 说明 color 发光的颜色 strength 发光的强度1-255
6.发光效果glow 1. 使用格式filter:glow(参数1=值,参数2=值…) 参数 说明 color 发光的颜色 strength 发光的强度1-255