css3模糊周围会有白边

CSS3模糊效果是一种常用的视觉效果，在网页设计中经常出现。但是，在实际应用中，你可能会发现一个问题，就是模糊效果周围会有白边，影响视觉效果。这个问题该如何处理呢？

.blur {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  -webkit-Box-shadow: 0px 0px 20px 5px rgba(0,0.5) inset;
  Box-shadow: 0px 0px 20px 5px rgba(0,0.5) inset;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

在上面的代码中，我们使用了CSS3模糊效果和内阴影效果。但是，你会发现，在实际应用中，模糊效果周围会出现白色的边，对视觉效果产生一定的影响。该如何处理呢？

这个问题的解决方法很简单，就是给模糊效果的元素添加一个透明的边框。

.blur {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  -webkit-Box-shadow: 0px 0px 20px 5px rgba(0,0.5) inset;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  border: 1px solid transparent;
}

在上面的代码中，我们添加了一个1px的透明边框，这样就可以解决模糊效果周围出现白边的问题了。

总结起来，解决CSS3模糊效果周围出现白边的问题，只需要为模糊效果的元素添加一个透明的边框即可。