这可以帮助您http://codepen.io/iamvdo/pen/xECmI

.effet{
  width: 400px; height: 300px;
  margin: 0 auto 50px auto;
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
  position: absolute;
}
.filtre--r{
  -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
  -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
  -webkit-filter: blur(5px);
  mask: url('#mask-radial');
  filter: url('#filtre1');
}
.filtre--l{
  -webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);
  -webkit-mask: linear-gradient(black, transparent 30%, black);
  -webkit-filter: blur(3px);
  mask: url('#mask-linear');
  filter: url('#filtre2');
}
.filtre:hover{
   -webkit-mask: none;
   -webkit-filter: none;
   mask: none;
   filter: none;
}
p{
   text-align: center;
   color: rgba(0,0,0,.6);
   margin: 1em;
}
p a{
  color: rgba(0,0,0,.6);
}

个字符

[编辑]截至2022年10月，现在可以在所有现代浏览器中使用。

是的，你可以，但目前the backdrop blur is not supported on all the browsers。
下面是一个简单的例子，可以在Chrome和Safari上运行，但不能在Firefox上运行（因为缺乏对背景过滤器的支持）。https://codepen.io/antoniandre/pen/vYpWQXd?editors=0100

* {margin: 0}

body {
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1500042600524-37ecb686c775?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') 0 0 / cover;

  &:after {
    content: '';
    position: absolute;
    inset: 10%;
    backdrop-filter: blur(20px);
    border: 1px solid white;
    -webkit-mask: linear-gradient(90deg, transparent, black 50%);
  }
}

字符串

你现在可以简单地使用：用途：

backdrop-filter: blur(4px)

字符串
除Firefox外，所有现代浏览器都支持它。