精通CSS滤镜(实例解析).doc

精通CSS滤镜（filter）（实例解析） ? ? ? 好久没弄弄美工了，前端时间由于学校的一个小网站的老师需要网站整体为绿色风格，但是他们又不能提供相关素材，这个 项目就一直拖着，需求也定不下来。后台基本功能都已经哦了，就等页面了，本来是想好好学学别的东西，巩固下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,finishopa