Appliquer les contours flous de l'image à l'aide de CSS

Donné une image, est-il un moyen pour adoucir les bords à l'aide de css? Ou par l'intermédiaire de certains librairie js (bien que le css serait de préférence)? L'idée est que les bords de l'image flou dans la transparence, de sorte qu'ils conviennent le mieux au contexte.

Exemple, l'image d'origine:

Appliquer les contours flous de l'image à l'aide de CSS

Image avec des arêtes adoucies:
Appliquer les contours flous de l'image à l'aide de CSS

Il y a beaucoup de questions similaires posées sur stackoverflow, cependant, aucun (que je peux trouver) offrent une réponse à faire exactement cela. Pour la plupart ils sont concernés par le flou de l'image entière, ou l'établissement d'un semi-bordure transparente sur l'image, ni d'être ce que je suis à la recherche d'.

  • pourquoi ne pas modifier l'image dans photoshop/gimp pour ressembler et de la place de l'img à l'intérieur d'un div conteneur?
  • Parce que les images seront utilisateur a téléchargé et l'effet doit être appliqué au moment de l'exécution.
  • Je tiens simplement à préciser que je n'ai pas mis le titre à cette question. La question initiale était "appliquer les contours flous de l'image à l'aide de css", parce que "des bords doux" est le nom par lequel je sais que cet effet (c'est ce qui est appelé dans MS Word, que j'ai utilisé pour générer l'exemple). J'imagine que c'est le nom d'autres personnes savent que, ainsi, qui sera maintenant encore plus difficile de trouver ci-dessous les réponses. Semble une honte. Aussi, la faute de frappe dans le titre "Applz" est un malchanceux doigt contraction de l'éditeur. @DJDavid98: pourquoi avez-vous jugé nécessaire de modifier ma question, qui semble parfaitement au point?
  • La plume est utilisé dans la plupart des avancées du programme de traitement d'image comme Photoshop, si je me souviens bien. Si vous êtes en désaccord, n'hésitez pas à le changer en arrière. Aussi, désolé pour la faute de frappe, j'ai corrigé maintenant.
  • Je suis en désaccord en ce sens qu'il y a en effet plus d'informations disponibles une fois que vous connaissez le mot-clé "plume", mais ce n'est utile qu'une fois que vous savez ce mot clé. Pour les non-éditeurs de l'image, un "soft edge" est beaucoup plus intuitive terme - aussi ce qui est utilisé dans MS Word - où nous allons commencer notre recherche.
InformationsquelleAutor mcProgrammer | 2015-03-28