随着浏览器的发展CSS的功能越来越强大,大多数的滤镜效果有类似功能的CSS样式实现了。
对应表:
IE 滤镜 W3C 滤镜
Alpha:设置透明层次. grayscale 灰度
blur:创建高速度移动效果,即模糊效果. sepia 褐色
Chroma:制作专用颜色透明. saturate 饱和度
DropShadow:创建对象的固定影子. hue-rotate 色相旋转
FlipH:创建水平镜像图片. invert 反色
FlipV:创建垂直镜像图片. opacity 透明度
glow:加光辉在附近对象的边外. brightness 亮度
gray:把图片灰度化. contrast 对比度
invert:反色.blur 模糊
light:创建光源在对象上. drop-shadow 阴影
mask:创建透明掩膜在对象上.
shadow:创建偏移固定影子.
wave:波纹效果.
Xray:使对象变的像被x光照射一样.
filter:filtername(parameters)即 filter:滤镜名(参数)其中,filter是滤镜选择符;filtername是滤镜的属性名,这里包括alpha、blur、chroma等
多种属性;parameters是属性参数值。属性名及参数值请看下面的《filter属性及属性值》。
具体的应用有两种方法:
1、先定义好CSS ,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可。
2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。
但是filter存在兼容问题。filter是IE专用的,所以IE以外的浏览器将无法正常显示。
下面是代码:仅供参考:
IE中兼容CSS的filter,火狐下不兼容。
.aa{
position:absolute
padding:4px
filter:
Dropshadow(offx=1,offy=0,color=#ffffff)
Dropshadow(offx=0,offy=1,color=#ffffff)
Dropshadow(offx=0,offy=-1,color=#ffffff)
Dropshadow(offx=-1,offy=0,color=#ffffff)
}
兼容IE和火狐
.aa{
position:absolute
padding:4px
filter:
Dropshadow(offx=1,offy=0,color=#ffffff)
Dropshadow(offx=0,offy=1,color=#ffffff)
Dropshadow(offx=0,offy=-1,color=#ffffff)
Dropshadow(offx=-1,offy=0,color=#ffffff)
text-shadow:1px 1px 1px #ffffff
}