如何在没有白光的情况下制作模糊效果？

Question

我用下面的CSS属性设置blur效果：

-webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 

它使div元素blur，但我看到在块的角处的白光，我怎样才能使blur effect没有他们？

Answer 1

以除去在纯CSS方式边缘模糊的唯一方法是通过变焦一点点然后用overflow: hidden裁剪边缘加入到容器中的元件：

.container { 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 

 
.blur { 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    transform-origin: 50%; 
 
    transform: scale(1.3); 
 
}

<div class="container"> 
 
    <div class="blur"> 
 
    <img src="http://lorempixel.com/700/300" alt=""> 
 
    </div> 
 
</div>

的jsfiddle ：https://jsfiddle.net/azizn/7v0mtfyn/