Css中的filter常用滤镜属性及语句大全

封面图 • 2025-09-15 • Html/Css

在 CSS 中，`filter` 属性允许开发者对元素应用图形效果（如模糊、颜色转换等）。以下是一些常用的 `filter` 属性及其用法：

### 1. `blur(px)`
- **描述**: 对图像应用高斯模糊。
- **语法**: `filter: blur(px);`
- **示例**:
  ```css
  img {
    filter: blur(5px);
  }
  ```

### 2. `brightness(%)`
- **描述**: 调整图像的亮度。值为 100% 是默认值，表示原始图像；小于 100% 会变暗，大于 100% 会变亮。
- **语法**: `filter: brightness(%);`
- **示例**:
  ```css
  img {
    filter: brightness(50%);
  }
  ```

### 3. `contrast(%)`
- **描述**: 调整图像的对比度。值为 100% 是默认值，表示原始图像；小于 100% 会降低对比度，大于 100% 会增加对比度。
- **语法**: `filter: contrast(%);`
- **示例**:
  ```css
  img {
    filter: contrast(200%);
  }
  ```

### 4. `drop-shadow(h-shadow v-shadow blur spread color)`
- **描述**: 向元素添加阴影。类似于 `box-shadow`，但它不会影响布局。
- **语法**: `filter: drop-shadow(h-shadow v-shadow blur spread color);`
- **示例**:
  ```css
  img {
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
  }
  ```

### 5. `grayscale(%)`
- **描述**: 将图像转换为灰度图像。值为 100% 是完全灰度，0% 或 100% 是原始图像。
- **语法**: `filter: grayscale(%);`
- **示例**:
  ```css
  img {
    filter: grayscale(50%);
  }
  ```

### 6. `hue-rotate(deg)`
- **描述**: 给图像应用色相旋转。值以度数表示，0deg 表示无变化，360deg 回到原始状态。
- **语法**: `filter: hue-rotate(deg);`
- **示例**:
  ```css
  img {
    filter: hue-rotate(90deg);
  }
  ```

### 7. `invert(%)`
- **描述**: 将图像转换为负片效果。值为 100% 是完全反转，0% 是原始图像。
- **语法**: `filter: invert(%);`
- **示例**:
  ```css
  img {
    filter: invert(100%);
  }
  ```

### 8. `opacity(%)`
- **描述**: 设置图像的透明度。值为 100% 是完全不透明，0% 是完全透明。
- **语法**: `filter: opacity(%);`
- **示例**:
  ```css
  img {
    filter: opacity(50%);
  }
  ```

### 9. `saturate(%)`
- **描述**: 设置图像的饱和度。值为 100% 是原始图像，小于 100% 会降低饱和度，大于 100% 会增加饱和度。
- **语法**: `filter: saturate(%);`
- **示例**:
  ```css
  img {
    filter: saturate(200%);
  }
  ```

### 10. `sepia(%)`
- **描述**: 将图像转换为 sepia 风格。值为 100% 是完全 sepia，0% 是原始图像。
- **语法**: `filter: sepia(%);`
- **示例**:
  ```css
  img {
    filter: sepia(50%);
  }
  ```

### 组合使用
多个 `filter` 效果可以组合使用，效果会按顺序叠加：
```css
img {
  filter: brightness(50%) contrast(200%) blur(5px);
}
```

### 浏览器兼容性
大多数现代浏览器都支持 `filter` 属性，但为了确保兼容性，建议在需要时使用前缀 `-webkit-`。

```css
img {
  -webkit-filter: blur(5px); /* Safari 和 Chrome */
  filter: blur(5px);
}
```

以上是 CSS `filter` 属性的一些常用功能和示例，可以根据需求灵活使用这些滤镜来增强网页的视觉效果。