CSS 滤镜

滤镜语法

filter:progid:DXImageTransform.Microsoft.名称(属性=值,...)
filter:名称(属性=值,...)

语本操作

滤镜列表

意义 示例/备注
Gradient(enabled=true) 色彩渐变  
Alpha(enabled=true) 透明度  
Shadow(enabled=true) 阴影
阴影
Wave(enabled=true) 波浪形扭曲  
Light(enabled=true) 光照效果  
Glow(enabled=true) 辉光效果
MotionBlur(enabled=true) 运动模糊
Invert(enabled=true) 反色 反色
FlipV(enabled=true) 上下镜相 上下镜相
FlipH(enabled=true) 左右镜相 左右镜相
Gray(enabled=true) 灰色  
Xray(enabled=true) 灰色反色(X光)  

通用属性

属性 意义
enabled 滤镜是否生效 true/1/false/0

Alpha 滤镜

属性 意义
style 类型,整体、线性、圆、距形放射 0、1、2、3
opacity 开始不透明度 0-100
finishOpacity 结束不透明度 0-100
startX 开始坐标X 用于线性
startY 开始坐标Y 用于线性 
finishX 结束坐标X 用于线性
finishY 结束坐标Y 用于线性

Gradient 滤镜

属性 意义
startColorStr 不透明度 开始颜色 #AARRGGBB
endColorStr 不透明度 结束颜色 #AARRGGBB
GradientType 渐变方向,水平、垂直 1、0
startColor 开始颜色,十进制  
endColor 结束颜色,十进制  

Shadow 滤镜

属性 意义
color 颜色  
direction 角度方向,上方为 0,右方为 90 整数
strength 长度  

Wave 滤镜

属性 意义
add 是否覆盖原图像 true/false
freq 波浪数目 默认3
lightStrength 浪尖与波谷距离 0-100,默认100
phase 正弦波开始处相位偏移 0-100

MotionBlur

属性 意义
add 是否覆盖原图像 true/false
direction 角度方向,上方为 0,右方为 90 整数
strength 长度  

Glow 滤镜

属性 意义
color 辉光颜色  
strength 辉光长度