filter:blur()径向模糊和局部模糊效果实例页面

展示

代码

• HTML：

  <h4>径向模糊</h4>
  <div class="box-blur">
      <img src="/images/common/l/1.jpg" class="radial-blur">
      <img src="/images/common/l/1.jpg">
  </div>
  <h4>局部模糊</h4>
  <p class="box-blur">
      <img src="/images/common/l/1.jpg" class="local-blur">
      <img src="/images/common/l/1.jpg">
  </p>

• CSS：

  .box-blur {
      width: 256px; height: 192px;
      position: relative;
      overflow: hidden;
  }
  .radial-blur {
      position: absolute;
      filter: blur(20px);
      -webkit-mask-image: radial-gradient(transparent, transparent 10%, black 60%);
      mask-image: radial-gradient(transparent, transparent 10%, black 60%);
      transform: scale(1.2);
  }
  .local-blur {
      position: absolute;
      filter: blur(12px);
      -webkit-mask: no-repeat center;
      -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black);
      -webkit-mask-size: cover, 100px 100px;
      -webkit-mask-composite: exclude;
      -webkit-mask-composite: source-out;
      mask: no-repeat center;
      mask-image: linear-gradient(black, black), linear-gradient(black, black);
      mask-size: cover, 100px 100px;
      mask-composite: exclude;
      mask-composite: source-out;
      transform: scale(1.1);
  }
  .box-blur img {
      width: 100%; height:100%;
  }
  .radial-blur,
  .local-blur {
      left: 0; right: 0; top: 0; bottom: 0;
      margin: auto;
  }