html - CSS を使用して画像の端をぼかす方法

Question

3 つのリスト項目を含む順序付けられていないリストがあります。各リスト項目には、画像と、テキストを含む 3 つの div があります。CSSだけで画像の縁をぼかしたい。

ここにある私のサイトは、現在、画像に次の html を使用することにより、羽毛効果があります。ただし、画像全体がぼやけているように見えますが、代わりに、EDGES だけを強くぼかす必要があり、約 画像のすべての辺の中央に向かって 50 ピクセル。

HTML:

<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>

CSS:

p.vignette {
  position: relative;
}

p.vignette img {
 display: block;
 width:80%;
margin-left:auto;
margin-right:auto;
 margin-top:6%;

}

p.vignette:after {
 -moz-box-shadow: inset 0 0 180px #defeec;
 -webkit-box-shadow: inset 0 0 180px #defeec;
 box-shadow: inset 0 0 180px #defeec;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

180px のインセット ボックス シャドウを使用していることがわかりますが、これにより画像全体がわずかにぼやけてしまいます。たとえば 50px を使用すると、ほとんど目立ちません! エッジだけを強くしてから、中心に向かって弱くなるようにするにはどうすればよいですか?

ありがとうございました！