本文介绍了框阴影插件不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我一直在使用一个阴影框插图,使一个内部发光的使边缘模糊和阴影像边缘烧伤的样子。我试图使用它的顶部和底部,而不是左/右边。但它不工作。我在 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...

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

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

-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...

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

08-15 18:48