css - Div エッジをぼかす方法

Question

CSSを使用して、

次のように: http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f

私は CSS (できれば CSS3 ではない) を使用して、鋭いエッジだけでなく、エッジとコーナーにその効果を持たせたいと考えています。

Answer 1

box-shadow次のように、div の背景と同じ色を使用することで、この効果を実現できます。

.blur-box {
    background-color: #555;
    box-shadow: 0 0 5px 10px #555;
}

2 番目と 3 番目の引数 (5pxと10pxここ ) を調整して、シャドウの相対的なサイズとぼかし半径を (それぞれ) 微調整して、希望どおりにすることができます。この機能は、最新のブラウザーで十分にサポートされています (参照: http: //caniuse.com/#feat=css-boxshadow )。

ここに jsFiddle のデモがあります: http://jsfiddle.net/bXAFt/