如何在 html 上的实际屏幕框架上添加阴影？答案

【问题标题】：How can I add a shadow to actual screen frame on html?如何在 html 上的实际屏幕框架上添加阴影？
【发布时间】：2013-10-04 09:06:41
【问题描述】：

如何在 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>

【问题讨论】：

你试过让它位置：固定？
Joao，不幸的是，当键盘可见时，它在 iPad 上不起作用:( stackoverflow.com/questions/10659891/…
检查这是否有帮助：stackoverflow.com/questions/7970389/…

标签： html shadow css

【解决方案1】：

身体{ -moz-box-shadow: 0 0 45px 45px rgba(50, 50, 50, 0.5);; -webkit-box-shadow: 0 0 45px 45px rgba(50, 50, 50, 0.5);; 盒子阴影：插图 0 0 15px 15px rgba(50, 50, 50, 0.5);; }

注意：根据您的要求更改值

【讨论】：

它在您滚动页面正文内的任何 div 的情况下起作用..我认为您想要 css for body 而不是您的 div...这就是提供解决方案的原因...
但是我没有看到body提供的代码有任何阴影。
看图片...如果是你的情况...我得到这样的阴影
谢谢。但它在我的页面上不起作用。真的不知道为什么。
您正在尝试使用哪个浏览器...它可能无法在旧浏览器中运行..我猜..

【解决方案2】：

感谢 Joao Palma 的评论：

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

【讨论】：