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 生成器