当前位置：首页 > news >正文

css的filter属性

news 2026/3/26 18:53:12

CSS的filter属性是用于对元素应用图形效果的强大工具，支持多种视觉特效。以下是核心内容：

基本语法与功能
- 语法：filter: <filter-function> [<filter-function>]* | none
- 功能：通过滤镜函数调整图像、背景和边框的渲染，实现模糊、亮度、对比度等效果。

常用滤镜函数

函数名	作用	示例值
`blur()`	模糊图像	`filter: blur(5px)`
`brightness()`	调整亮度	`filter: brightness(1.5)`
`contrast()`	调整对比度	`filter: contrast(200%)`
`drop-shadow()`	添加阴影	`filter: drop-shadow(16px 16px 20px blue)`
`grayscale()`	转为灰度	`filter: grayscale(50%)`
`hue-rotate()`	色相旋转	`filter: hue-rotate(90deg)`
`invert()`	反转颜色	`filter: invert(100%)`
`opacity()`	调整透明度	`filter: opacity(50%)`
`saturate()`	调整饱和度	`filter: saturate(0)`
`sepia()`	转为深褐色	`filter: sepia(1)`

使用示例

/* 单个滤镜 */
img {filter: blur(3px); /* 图片模糊 */
}/* 多个滤镜链式组合 */
.element {filter: contrast(150%) brightness(1.2); /* 增强对比度并提亮 */
}/* 动画效果 */
.button:hover {filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); /* 悬停时添加阴影 */
}

注意事项

兼容性：filter属性在现代浏览器中广泛支持，但部分旧版浏览器可能不兼容。
性能：复杂滤镜可能影响性能，建议在关键路径中谨慎使用。
与backdrop-filter的区别：backdrop-filter作用于元素背景区域，需背景透明度才能生效。

实际应用

毛玻璃效果：通过blur()实现背景虚化。
交互特效：如悬停时图像模糊、点击时变亮。
UI设计：增强按钮、卡片等元素的视觉层次。

通过合理组合滤镜函数，可轻松实现丰富的视觉效果，提升网页交互体验。
参考资料
[1] Filter css属性详解 - CSDN博客
[2] 深入解析 CSS filter 属性 - CSDN博客
[3] CSS中经常用到的filter属性,你真的知道它的用法吗? - CSDN博客
[4] CSS--filter属性 - CSDN博客
[5] 巧用CSS filter,让你的网站更加酷炫!-CSDN博客 - CSDN博客
[6] CSS backdrop-filter 属性 - www.runoob.com
[7] 使用CSS的filter属性为不规则形状添加阴影效果 - 稳稳地约定
[8] 我不允许你还不知道CSS的filter的drop-shadow阴影用法 - 哔哩哔哩
[9] css边缘融合效果模糊/对比度 filter blur/contrast - 哔哩哔哩
[10] 理解CSS position属性 - 度小视
[11] list-style-type:CSS列表符号全攻略 - 秒懂大百科
[12] 你不知道的10个 CSS 属性 - 哔哩哔哩
[13] 10个你从未听说过的CSS属性,掌握它们让你更强大 - 度小视
[14] CSS的filter属性详解 - CSDN博客
[15] CSS3的filter属性 - CSDN博客
[16] CSS 模糊属性详解:filter 和 backdrop-filter - PHP中文网
[17] css中的filter属性 - CSDN博客
[18] 学习filter属性和常用方式 - CSDN博客
[19] CSS——滤镜(filter ) - CSDN博客
[20] 巧用CSS filter,让你的网站更加酷炫! - CSDN博客
[21] css:使用filter和backdrop-filter实现高斯模糊效果 - CSDN博客
[22] 从微信聊天框开始学习CSS属性filter - 腾讯云
[23] CSS的filter属性添加各种图形效果使用示例 - 脚本之家
[24] 【CSS】1095- CSS filter 有哪些神奇用途 - 腾讯云
[25] css / filter属性 - CSDN博客
[26] css3 filter属性的使用简介 - 脚本之家

百度AI生成，内容仅供参考