如何在沒有白光的情況下製作模糊效果？

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/