Comment puis-je obtenir un effet de flou défini dans CSS3 tout en préservant les bords nets ?

Obtention de bords définis avec le filtre flou CSS3

Lors de l'application d'un effet de flou à une image à l'aide de la propriété de filtre CSS, un problème courant survient : les bords de l'image deviennent également flous. Cela peut entraîner un résultat indésirable, en particulier lorsque des lignes ou des détails nets doivent être préservés.

Pour résoudre ce problème et conserver des bords définis, une technique intelligente peut être utilisée. En plaçant l'image floue dans un

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;
}