Wie mache ich Unschärfe-Effekte ohne weißes Licht?

Question

ich die folgende CSS-Eigenschaft verwenden blur Effekt einstellen:

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

Es macht div Element blur, aber ich sehe weißes Licht an den Ecken des Blocks, wie kann ich blur effect ohne sie machen?

Answer 1

Der einzige Weg, um die unscharfen Kanten in einer reinen CSS Weise zu entfernen ist, indem das Element ein wenig dann Zoomens die Kanten mit overflow: hidden hinzugefügt, um den Behälter clipping:

.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/