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();
}原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/126872.html
微信扫一扫 