2024年4月11日发(作者：)
CSS滤镜的使用
一、以文字应用滤镜
1、投影文字特效
【基本结构】
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
【语法解释】
Color=? 指定阴影的颜色;
OffX=? OffY=? 设置X和Y方向的偏移；
Positive=? 是一个逻辑值，取值为0和1，0指定给透明像素生成阴影，1
指定给非透明像素生成阴影，
效果截图如下：（文字大小36，隶书，粗体，红色）
DropShadow(Color=#999999, OffX=2, OffY=2, Positive=1)
2、阴影文字特效
【基本结构】
Shadow(Color=?, Direction=?)
【语法解释】
Color=? 指定阴影的颜色，
Direction=? 指定阴影的角度，取值为0～360；
效果截图如下：（文字大小36，隶书，粗体，黄色）
Shadow(Color=#FF0000, Direction=135)
3、光晕文字特效
【基本结构】
Glow(Color=?, Strength=?)
【语法解释】
Color=?, 指定光晕的颜色，
Strength=? 是强度，决定光晕的像素数，取值范围为1～255之间的整数。
效果截图如下：（文字大小36，隶书，粗体，黄色）
Glow(Color=#FF0000, Strength=3)
1
4、模糊文字效果
【基本结构】
Blur(Add=?, Direction=?, Strength=?)
【语法解释】
Add=?, 是一个逻辑值，取0或1。对于图像取0效果较好，对于文字应取
1；
Direction=?, 指定模糊移动的角度，取值为0～360，默认270；
Strength=? 指定模糊移动的距离，以像素为单位；
效果截图如下：（文字大小36，隶书，粗体，红色）
Blur(Add=1, Direction=135, Strength=10)
二、对图像应用滤镜
1、模糊图像效果
【基本结构】
Blur(Add=?, Direction=?, Strength=?)
【语法解释】
Add=?, 是一个逻辑值，取0或1。对于图像取0效果较好，对于文字应取
1；
Direction=?, 指定模糊移动的角度，取值为0～360，默认270；
Strength=? 指定模糊移动的距离，以像素为单位；
效果截图如下：
Blur(Add=0, Direction=135, Strength=15)
2
2、透明图像效果
【基本结构】
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?,
FinishY=?)
【语法解释】
【Opacity=?】透明度水准。默认的范围是0～100，其实是百分比的形式，
也就是说，0代表完全透明，100代表完全不透明。
【FinishOpacity=?】是一个可选参数，如果想要设置渐变的透明效果，就可
以使用它们来指定结束时的透明度。范围是0～100。
【Style=?】参数指定了透明区域的形状特征，其中0代表统一形状、1代
表线形、2代表放射状、3代表长方形。
【StartX=? StartY=?】代表渐变透明效果开始的X和Y坐标。
【FinishX=? FinishY=?】代表渐变透明效果结束`的X和Y坐标。
效果截图如下：
Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=400,
FinishY=250)
3
4
发布评论