4.6扩展：CSS滤镜

CSS滤镜（CSS Filters）允许对元素应用图形效果，如模糊、亮度、色彩偏移等。滤镜可以直接在CSS中通过filter属性应用,filter 属性定义了元素的可视效果(例如：模糊与饱和度)。滤镜常用于调整图像、背景和边框的渲染。具体使用语法如下:

filter属性接受的参数为滤镜函数。以下为可使用的滤镜函数：

① blur(px)：对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。

② brightness(%)：调整图像的亮度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％ 将提供更明亮的结果。

③ contrast(%)：调整图像的对比度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。超过 100％ 的值将提供更具对比度的结果。

④ drop-shadow(h-shadow v-shadow blur spread color)：对图像应用阴影效果。可能的值：

h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。

v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。

blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。

spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。、

⑤ grayscale(%)：将图像转换为灰阶。0% (0) 是默认值，代表原始图像。100％ 将使图像完全变灰（用于黑白图像）。不允许负值。

⑥ hue-rotate(deg)：在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。最大值是 360deg。

⑦ invert(%)：反转图像中的样本。0% (0) 是默认值，代表原始图像。100％将使图像完全反转。不允许负值。

⑧ opacity(%)：设置图像的不透明度级别。opacity-level 描述了透明度级别，0% 为完全透明。100% (1) 是默认值，代表原始图像（不透明）。不允许负值。

⑨ saturate(%)：设置图像的饱和度。不允许负值。

⑩ sepia(%)：将图像转换为棕褐色。0% (0) 是默认值，代表原始图像。100％ 将使图像完全变为棕褐色。不允许负值。

⑪ url()：接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。

效果如图4-6-1所示，具体示例如下：

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙