问题描述
所以我一直在使用一个阴影框插图,使一个内部发光的使边缘模糊和阴影像边缘烧伤的样子。我试图使用它的顶部和底部,而不是左/右边。但它不工作。我在 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...
这篇关于框阴影插件不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!