html - ボックスの底だけから非常に「ぼやけた」ボックス シャドウを取得するにはどうすればよいですか?

Question

私の目標は、純粋な css でこれを行うことです。

次のような非常に大きな影のぼかしでボックスの影を作ろうとしています:

box-shadow: 0 0px 200px -2px #888;

ボックスの下では見栄えがしますが、上ではページ全体が暗くなります。この暗くすることなく、どうすれば超大きなぼかしを作成できますか?

Answer 1

これを行う最善の方法は、シャドウの代わりにcss-gradientsを使用することです。

jsfiddleで少しデモを行いました。これがあなたが探しているものかどうかはわかりません。使用したcssは次のとおりです。

background: rgb(254,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,255,255,1) 69%, rgba(226,226,226,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(69%,rgba(254,255,255,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,255,255,1) 69%,rgba(226,226,226,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9

このツールによって生成される

Answer 2

このCSS3ジェネレーターを使用してこれを思いつきました

-webkit-box-shadow: inset 0px -350px 200px -250px rgba(5, 5, 5, 1);

        box-shadow: inset 0px -350px 200px -250px rgba(5, 5, 5, 1);

これは非常にクロス ブラウザ フレンドリーな方法であり、背景色を適用すると、希望どおりの結果が得られると思います。

このjsFiddleをチェックしてください

ソース

CSS3 ジェネレーター