以下实例演示了所有滤镜的使用方法 - 在线编辑器

          <!DOCTYPE html>
<html>
<head>
  <style>
    img {
      width: 33%;
      height: auto;
      float: left;
    }

    .blur {
      -webkit-filter: blur(4px);
      filter: blur(4px);
    }

    .brightness {
      -webkit-filter: brightness(0.30);
      filter: brightness(0.30);
    }

    .contrast {
      -webkit-filter: contrast(180%);
      filter: contrast(180%);
    }

    .grayscale {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    .huerotate {
      -webkit-filter: hue-rotate(180deg);
      filter: hue-rotate(180deg);
    }

    .invert {
      -webkit-filter: invert(100%);
      filter: invert(100%);
    }

    .opacity {
      -webkit-filter: opacity(50%);
      filter: opacity(50%);
    }

    .saturate {
      -webkit-filter: saturate(7);
      filter: saturate(7);
    }

    .sepia {
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
    }

    .shadow {
      -webkit-filter: drop-shadow(8px 8px 10px green);
      filter: drop-shadow(8px 8px 10px green);
    }
  </style>
</head>
<body>

  <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>

  <img src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="blur" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="brightness" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="contrast" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="grayscale" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="huerotate" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="invert" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="opacity" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="saturate" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="sepia" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">
  <img class="shadow" src="/examples/pineapple.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>
        