Question

因此，我一直在使用阴影框插图来制作内部发光，使边缘模糊和阴影，就像边缘燃烧外观一样。我试图仅用于顶部和底部，而不是用于左/右侧。但它不起作用。我在overflow: auto <div>上使用它，以便它可以滚动并产生很好的效果。

这是我的css：

#content {
    font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif; 
    line-height:1.2em;
    height: 400px;
    width: 500px;
    overflow: auto;
    float: right;
    padding: 0 10px;

    -moz-box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
    -webkit-box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
    box-shadow: inset 0  8px 8px -8px #000, inset 0 -8px 8px -8px #000;
}

Answer 1

你在黑色背景上有一个黑色阴影，所以很自然地，你不会看到任何东西。关掉你的黑色背景，我们可以看到阴影很好......

http://jsfiddle.net/sparky672/p3Mgn/1/show

所以你只需要选择不同的阴影颜色。以下是您的阴影更改为白色#fff ...

Full Size Demo

http://jsfiddle.net/sparky672/p3Mgn/3/

-moz-box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
-webkit-box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
box-shadow: inset 0  8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;

编辑以回应OP的评论：

浏览器只有两种颜色可供渲染阴影。

1）背景图像的颜色（或在这种情况下只是背景颜色）

2）阴影颜色

无论它们是否相同，阴影都是不可见的。

要使用黑色背景获得模糊效果，也许可以尝试使用#444阴影......我觉得它看起来很不错......

http://jsfiddle.net/sparky672/p3Mgn/5/show/

Answer 2

你想让内容之上的阴影模糊到顶部和底部吗？如果是，则问题在于您的阴影显示在下方内容中。如果设置“position：relative; z-index：-1;”，可以将其设置在它上面。到内容块，但是你将无法点击或滚动它。

更容易实现这种效果的方法是使用：before和：之后的伪类和css-gradient。

此处示例：http://jsfiddle.net/V96wx/2/

在上面的示例中，您将需要2个容器 - 一个用于溢出，一个用于淡化（以使其更加防弹）。但理论上你只能用1个容器来做，我会写怎么样......

首先 - :before和:after如何运作。考虑它们的最简单方法是在实际内容之前和之后将在父容器中添加另外两个元素。例如：.about:before将添加到.about容器中，但在实际内容之前。

:before和:after如果您没有添加，则会有一个必需的属性内容，不会创建元素。 conent可能具有以下值之一：htmldog.com/reference/cssproperties/content。在我的例子中，它留空了。插入元素后，您可以根据需要使用与每个其他元素相同的规则设置样式。

为了淡化我的例子我使用渐变与trasparency。您可以在此处阅读有关渐变的davidwalsh.name/css-gradients。透明度通过使用rgba中的颜色来完成（第四位是透明度级别）。

我在我的示例中使用了2个容器的原因是因为如果没有它就很难准确地将:before和:after元素放在主容器上方 - 如果你试图使用它们的实际坐标，它们将会正确定位，但会滚动内容，如果你不使用position：relative在基本容器上你需要知道这个容器坐标来定位。如果容器高度固定不是问题，但如果不是，则可能很棘手。

BTW：从理论上讲，有一种更简单的淡入淡出方法 - 使用带渐变的css蒙版（webkit.org/blog/181/css-masks），但现在它只适用于Safari和Chrome。

Box Shadow inset不起作用

2 个答案: