CSS过滤器——文本和图像效果

CSS过滤器是一种可以应用于图像、视频和音频元素的效果。本文将着重介绍CSS过滤器中的文本和图像效果，为您呈现一些简单实用而又不失美观的例子。

文本效果

1. 阴影

示例代码：

text-shadow: 1px 1px 2px #444;

这将在文本下方创建一个模糊的黑影，使文本看起来更为突出。属性值的前两个参数分别是x和y方向的偏移量，第三个参数是模糊程度，第四个参数是阴影的颜色。

2. 描边

示例代码：

-webkit-text-stroke: 1px #000;

这将使文本看起来更加醒目，类似于文字轮廓。属性值的第一个参数是轮廓宽度，第二个参数是轮廓颜色。

3. 模糊

示例代码：

color: transparent;
text-shadow: 0 0 10px rgba(0,0,0,0.5);

这将使文本看起来变得模糊。将文本颜色设置为透明后，使用text-shadow创建文本的阴影，并对阴影进行模糊处理。

4. 发光

示例代码：

text-shadow: 0 0 10px #fff;

这将给文本创建一个类似于发光的效果，使文本看起来更加突出。属性值的第一个参数是x方向的偏移量，第二个参数是y方向的偏移量，第三个参数是模糊程度，第四个参数是光圈颜色。

图像效果

1. 反色

示例代码：

filter: invert(100%);

这将使图像反色。

2. 饱和度

示例代码：

filter: saturate(200%);

这将增加图像的饱和度，使其色彩更加鲜艳。

3. 对比度

示例代码：

filter: contrast(200%);

这将增加图像的对比度，使它更加清晰。

4. 倒影

示例代码：

-webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0,0,0,0.3));

这将在图像底部创建一个倒影，使图像看起来更加生动。属性值的第一个参数是倒影的位置，第二个参数是渐变颜色，可以自行设置。

5. 模糊

示例代码：

filter: blur(10px);

这将使图像变得模糊。属性值可以自行设置。

以上是CSS过滤器中的一些文本和图像效果的示例。您可以根据需要进行调整和修改，以满足您的特定需求。