CSSボックスの影は本当に透明ではありませんか？

Question

これは8つの白いボックスシャドウのスタックで、下に青い背景グラデーションがあり、他の場所に白い背景があります。

私の論理では、白い背景に白い影の影が出るはずですが、白い部分を白い背景の部分から分ける灰色の縁がはっきりとあります。これを生成CSSは次のとおりです。当然のことながら

.content, .sidebar, .banner{ 
    background-color: white; 
    -webkit-box-shadow: 0px 0px 15px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
} 

、少ないボックスシャドウ、それはあまり顕著で、まだ非常に顕著な純白の背景にあります。この目的は、私は白コンテンツ領域が青色勾配に固執するが、この画像

に示されるようにそっと白グロー影「クリア」コンテンツ領域の周囲の勾配の領域と

この画像は、焼き鳥の花火を使って作ったモックアップからのものです。白い背景に白いグローシャドーブレンドが完全に表示され、下のグラデーションに対してもうまく機能します。 CSSのドロップシャドウ（これまではクロムでしかテストされていませんでした）が悪い振る舞いをする原因、または私が望む効果を達成するために使用できる他のメカニズムは何ですか？代わりに、一つの要素に8つの異なる影を使用しての

Answer 1

、影を使用するには、あなたが望む効果を得るために、大きなサイズのプロパティを広める：

box-shadow: 0px 0px 35px 20px #fff; 

あなたがin this demonstrationを見ることができるように、あなただけの1つの影と必要4番目のプロパティー20pxを使用すると、要素の端から影を広げて、ソフトグロー効果を作成できます。あなたが望むものを得るための設定で遊ぶ。

さらに、スクリーンショットにある効果を再現するには、opacity: 0.5;を使用してさらに効果を高めることができます。デモをご覧ください。

希望するもの：