开发者

Adding an "inner glow" to a page with CSS

I'm trying to add an i开发者_开发百科nner glow to a whole page using CSS.

CSS:

body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 10px #000000;
    background-image: url('/images/bg.png');
}

That half-works. The inner glow is there but it doesn't stretch to the whole height of the page.

http://snapplr.com/g65v.png

Is there an easy way to do this?


The problem is that the body element doesn't fill the window.

Add this to your CSS:

html, body { height: 100%; }


Try switching the body to html , e.g. :

html {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
background-image: url('/images/bg.png');
}

Link : http://jsfiddle.net/LUREm/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜