框阴影插件不工作 [英] Box Shadow inset not working

问题描述

所以我一直在使用一个阴影框插图，使一个内部发光的使边缘模糊和阴影像边缘烧伤的样子。我试图使用它的顶部和底部，而不是左/右边。但它不工作。我在 overflow：auto < div> 上使用它，以便它可以滚动和有一个很好的效果

So I've been using a shadow box inset to make a inner glow kind of making the edges blurry and shadowy like for a edge burn look. I'm trying to use it for the top and bottom only and not for the left/right sides. But it's not working. I'm using it on a overflow: auto <div> so that it can scroll and have a nice effect.

以下是我的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;
}

推荐答案

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

You have a black shadow on a black background so naturally, you're not going to see anything. Turning off your black background, we can see the shadows just fine...

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

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

So you just need to select different shadow colors. Here are your shadows changed to white #fff...

全尺寸演示

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;

EDIT ：

浏览器只能使用两种颜色来渲染阴影。

The browser is only given two colors to use in order to render a shadow.

1）背景图片的颜色在这种情况下）

1) The background image's color (or just background color in this case)

2）阴影颜色

要使用黑色背景来产生模糊效果，可以尝试＃444 作为阴影。看起来不错我认为...

To have a blurry effect using a black background, perhaps try #444 for the shadow... it looks pretty good I think...

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

这篇关于框阴影插件不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！