CSS滤镜filter实例讲解.docx

CSS滤镜实例讲解（filter）Dada久没弄弄美工了，前端时间由于学校的一个小网站的老师需要网站整体为绿色风格，但是他们又不能提供相关素材，这个项目就一直拖着，需求也定不下来。后台基本功能都已经哦了，就等页面了，本来是想好好学学别的东西，巩固下Java一些基础，但是这事拖着，还是够不爽的。security框架的例子也不好弄，于是还是决定总结一下最近学习的CSS滤镜。Css滤镜比较帅，可以取代一部分PS才能实现的效果，但是缺点也比较明显，浏览器并不是都支持。但考虑到IE6，7...占的市场份额还是挺很大的，所以有学习的必要。网上不缺CSS滤镜的知识，但是大多是长篇大论，或不够全面。现在结合自己做的例子和网上的资料，自己的学习心得总结如下。毕竟我不是专业搞美工，所以这篇随笔，是基本是面向初学者，并使其快速掌握。也了解现在的CSS都能做什么。为了充实内容，顺便给出jQuery实现弹出层特效的源码。CSS（Cascading Style Sheets) 层叠样式表单。1998年5月12日，Cascading Style Sheets,level 2 成为了W3C的新标准。同时,”W3C CoreStyles 和CSS2 Validation Service 以及“CSS Test Suite 宣布成立。它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志（TAG）里，也可以在外部附加文档作为外加文档。此时，一个样式表单可以作用于多个页面---甚至整个站点，因此具有更好的易用性和扩展性。 对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT， 这就说明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础。?可视化滤镜属性只能用在HTML控件元素上，不能使用div的id，class定义。所谓的HTML空间元素就是它们在页面上定义了一个矩形空间，浏览器的窗口可以显示这些空间。下面列出了HTML合法的控件和它们的说明。?元素 说明?BODY网页文档的主体元素，所有的可见范围都在元素内?BUTTON表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式?DIV定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的?IMG图片元素，通过指定“src属性来指定图片的来源?INPUT输入表单域?MARQUEE移动字幕效果?SPAN定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的?TABLE表格?TD表格数据单元格?TEXTAREA文本区域?TFOOT多行输入文本框?TH表格标题单元格?THEAD表格标题?TR表格行?////////////////////////////////////////IE4.0以上支持的滤镜属性表?滤镜效果 描述 ：Alpha 设置透明度?Blru 建立模糊效果?Chroma 把指定的颜色设置为透明?DropShadow 建立一种偏移的影象轮廓，即投射阴影?FlipH 水平反转?FlipV 垂直反转?Glow 为对象的外边界增加光效?Grayscale 降低图片的彩色度?Invert 将色彩、饱和度以及亮度值完全反转建立底片效果?Light 在一个对象上进行灯光投影?Mask 为一个对象建立透明膜?Shadow 建立一个对象的固体轮廓，即阴影效果?Wave 在X轴和Y轴方向利用正弦波纹打乱图片?Xray 只显示对象的轮廓??下面分别阐述：1、Alpha 滤镜?语法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,?starty=starty,finishx=finishx,finishy=finishy)}?Alpha属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下：?“opacity代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。”finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。“style 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效