在css中筛选框怎么写「在css中筛选框怎么写」

1. 基本语法

在CSS中，筛选框的基本语法如下：

selector {
  filter: property(filter-function) filter-function(filter-value);
}

其中，selector表示要应用筛选效果的元素选择器，property表示要应用筛选效果的属性，filter-function表示要使用的筛选函数，filter-value表示要设置的筛选值。

2. 常用筛选函数

CSS提供了一些常用的筛选函数，用于实现不同的筛选效果。以下是一些常见的筛选函数及其用法：

2.1 blur()

blur()函数用于对图像进行模糊处理。它接受一个参数，表示模糊的程度。数值越大，图像越模糊。

示例代码：

img {
  filter: blur(5px);
}

2.2 brightness()

brightness()函数用于调整图像的亮度。它接受一个参数，表示亮度的比例。数值为1时表示原始亮度，小于1时表示降低亮度，大于1时表示增加亮度。

示例代码：

img {
  filter: brightness(0.8);
}

2.3 contrast()

contrast()函数用于调整图像的对比度。它接受一个参数，表示对比度的比例。数值为1时表示原始对比度，小于1时表示降低对比度，大于1时表示增加对比度。

示例代码：

img {
  filter: contrast(1.2);
}

2.4 drop-shadow()

drop-shadow()函数用于给元素添加阴影效果。它接受多个参数，分别表示阴影的水平偏移量、垂直偏移量、模糊程度、颜色和扩展半径。

示例代码：

div {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

2.5 grayscale()

grayscale()函数用于将图像转换为灰度图像。它不接受任何参数。

示例代码：

img {
  filter: grayscale();
}

2.6 hue-rotate()

hue-rotate()函数用于调整图像的颜色。它接受一个参数，表示旋转的角度。正值表示顺时针旋转，负值表示逆时针旋转。默认值为0，表示不旋转。

示例代码：

img {
  filter: hue-rotate(90deg);
}

2.7 invert()

invert()函数用于反转图像的颜色。它不接受任何参数。

示例代码：

img {
  filter: invert();
}