Wie kann ich in CSS3 einen definierten Unschärfeeffekt erzielen und gleichzeitig scharfe Kanten erhalten?

Erzielen definierter Kanten mit CSS3-Filter-Unschärfe

Beim Anwenden eines Unschärfeeffekts auf ein Bild mithilfe der CSS-Filtereigenschaft tritt ein häufiges Problem auf: Auch die Bildränder werden unscharf. Dies kann zu einem unerwünschten Ergebnis führen, insbesondere wenn scharfe Linien oder Details erhalten bleiben müssen.

Um dieses Problem zu lösen und definierte Kanten beizubehalten, kann eine clevere Technik eingesetzt werden. Durch Platzieren des unscharfen Bildes innerhalb eines

img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}