CSS 濾鏡效果

- WD

使用 filter 屬性將濾鏡效果套用至元素的方法,與 SVG 中提供的濾鏡相符。濾鏡功能包括模糊、亮度、對比、陰影、灰階、色相旋轉、反轉、不透明度、褐色調和飽和度。

Chrome

  1. 4 - 17: 不支援
  2. 18 - 52: 支援
  3. 53 - 123: 支援
  4. 124: 支援
  5. 125 - 127: 支援

Edge

  1. 12: 預設停用
  2. 13 - 18: 部分支援
  3. 79 - 123: 支援
  4. 124: 支援

Safari

  1. 3.1 - 5.1: 不支援
  2. 6 - 9: 支援
  3. 9.1 - 17.3: 支援
  4. 17.4: 支援
  5. 17.5 - TP: 支援

Firefox

  1. 2 - 3.5: 不支援
  2. 3.6 - 33: 部分支援
  3. 34: 預設停用
  4. 35 - 124: 支援
  5. 125: 支援
  6. 126 - 128: 支援

Opera

  1. 9 - 12.1: 不支援
  2. 15 - 39: 支援
  3. 40 - 108: 支援
  4. 109: 支援

IE

  1. 5.5 - 10: 不支援
  2. 11: 不支援

Chrome for Android

  1. 124: 支援

Safari on iOS

  1. 3.2 - 5.1: 不支援
  2. 6 - 9.2: 支援
  3. 9.3 - 17.3: 支援
  4. 17.4: 支援
  5. 17.5: 支援

Samsung Internet

  1. 4 - 6.4:支援
  2. 7.2 - 23:支援
  3. 24:支援

Opera Mini

  1. 全部:不支援

Opera Mobile

  1. 10 - 12.1:不支援
  2. 80:支援

UC Browser for Android

  1. 15.5:支援

Android Browser

  1. 2.1 - 4.3:不支援
  2. 4.4 - 4.4.4:支援
  3. 124: 支援

Firefox for Android

  1. 125: 支援

QQ Browser

  1. 14.9:支援

Baidu Browser

  1. 13.52:支援

KaiOS Browser

  1. 2.5:支援
  2. 3:支援

請注意,此屬性與 Microsoft 的較舊「filter」屬性有顯著不同,且不相容。

資源
示範
濾鏡編輯器
濾鏡遊樂場
HTML5Rocks 文章