Question

我的目标是使用纯CSS进行this。

我正试图让我的盒子阴影像这样一个非常大的阴影模糊：

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

由this工具生成

Answer 2

我使用this CSS3 Generator

提出了这个问题

-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

<强>来源（S）

CSS3 Generator

如何才能从盒子的底部获得一个非常“模糊”的盒子阴影？

2 个答案: