如何添加阴影到HTML上的实际屏幕框架？

如何在其他内容顶部的html上为实际屏幕框添加阴影？如果这是不可能的，那么身体框架的相同问题。如何添加阴影到HTML上的实际屏幕框架？

这不起作用：

body { 
    -webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b; 
    box-shadow: inset 0 0 10px #0d1f2b; 
}

这显示屏幕边界阴影，但我可以通过滚动页面的内容滚动起来：

.screen { 
    position:absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    -webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b; 
    box-shadow: inset 0 0 10px #0d1f2b; 
} 

    <div class="screen"></div>

来源

2013-10-04 Dmitry

变化值有你试图使它的位置是：固定的吗？ –

若昂，不幸的是它不能在iPad上工作时键盘可见:(http://stackoverflow.com/questions/10659891/fixed-position-div-freezes-on-page-ipad – Dmitry

检查是否可以帮助：http ：//stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard –

enter image description here 体{ -moz-箱阴影：0 0×45像素×45像素的RGBA（50，50，50，0.5）;; -webkit-box-shadow：0 0 45px 45px rgba（50，50，50，0.5）;; box-shadow：inset 0 0 15px 15px rgba（50，50，50，0.5）;; }

注：根据您的要求

来源

2013-10-04 09:22:53

这是行不通的。你尝试过吗？ – Dmitry

它的工作在你滚动页面内任何div的情况下..我以为你想要身体的css不适合你的div ...多数民众赞成为什么提供解决方案... –

但我没有看到任何阴影与'身体提供的代码。 – Dmitry

感谢若昂·帕尔马的评论：

.screen { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    -webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b; 
    box-shadow: inset 0 0 10px #0d1f2b; 
} 

    <div class="screen"></div>

不幸的是，它不起作用ipad公司当键盘是可见:(相对问题：fixed position div freezes on page (iPad)

来源

2013-10-04 09:19:52 Dmitry

如何添加阴影到HTML上的实际屏幕框架？

回答

相关问题