CSS 滤镜大全

CSS 滤镜大全

css滤镜的标识符式“filter”，总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。

progID= program identifier （程序ID）

DX=DirectX

在CSS样式中，提供了filter（滤镜效果），它可以对文字、图片、表格等确定范围的HTML标记设置滤镜效果。

旋转：

style=\"filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)\"

去背景色：

style=\"filter:Chroma(Color=#000000)\"

设置渐变色：

style=\"position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType=1)\"

以下是图片转换滤镜：

随机变换：progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)

方形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)

方形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)

交叉渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)

交叉渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)

菱形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)

菱形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)

圆形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)

圆形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)

加号渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)

加号渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)

星形渐大：progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)

星形渐小：progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)

向上擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)

向下擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)

向左擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)

向右擦除：progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)

Ｖ百叶窗

：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)

：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)

：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)

：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)

Ｈ百叶窗

：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)

：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)

：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)

：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)

横向棋盘

：

progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)

：progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)

：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)

：progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)

：

progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)

：progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)

纵向棋盘

：

progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)

：progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)

：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)

：progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)

：

progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)

：progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60)

随机溶解：progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)

左右中部收缩：progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)

中部左右展开：progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)

上下中部收缩：progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)

中部上下展开：progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal)

阶梯左下：progid:DXImageTransform.Microsoft.Strips(motion=leftdown)

阶梯右上：progid:DXImageTransform.Microsoft.Strips(motion=rightup)

阶梯左上：progid:DXImageTransform.Microsoft.Strips(motion=leftup)

阶梯右下：progid:DXImageTransform.Microsoft.Strips(motion=rightdown)

随机水平线：progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)

随机垂直线：progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)

标准渐变转化：BlendTrans(enabled=true,percent=10)

可调渐变转化：progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)

向右下插入：progid:DXImageTransform.Microsoft.Inset(enabled=ture)

马赛克效果：progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)

时钟：progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)

反时钟：progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)

辐射射线：progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)

隐藏式幻灯片

：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)

：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)

推动式幻灯片

：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)

：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)

交换式幻灯片

：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)

：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)

螺旋形收缩：progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)

隐藏式伸展：progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)

推动伸展：progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)

旋转伸展：progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)

风车转动：progid:DXImageTransform.Microsoft.Wheel(spokes=20)

模糊推进

：

progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)

：

progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)

：

progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)

：

progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)

Ｚ形曲折：progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)