如何让 <body> 嵌入阴影在 IE9 中工作？答案

【问题标题】：How to get <body> inset shadow to work in IE9?如何让 <body> 嵌入阴影在 IE9 中工作？
【发布时间】：2013-01-17 13:12:02
【问题描述】：

我从这里的一个答案中得到了说明，并得到了 inset box-shadow 来处理 body 标签。

下面是实际示例：http://nemokamamuzika.lt

这是我闲置的代码：

html, body { 
    width:100%;
    height: 100%;
}

body {
    box-shadow: inset 0 0 1000px 30px black;
    background: url('http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg');
}

但是....它在“喜爱的”浏览器 Internet Explorer 9 中不起作用...

Finnaly 自己解决了问题。如果有人需要解决方案：

这是html：

<body>
<div id="shadow">
<div id="padding">
<div id="content">
</div></div></div></body>

这是 CSS：

html { 
    height: 100%;
}

body {
  height:100%;
  min-height: 100%;
  background-image: url('/wp-content/uploads/someimage.jpg');
  background-attachment: scroll;
  background-repeat: repeat;
}

#shadow {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  box-shadow: inset 0 0 400px 50px black;
}

#padding{
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 30px 0 30px 0;
}

【问题讨论】：

您是否尝试添加前缀ms-？帕班迪克 :)
@Morpheus: -ms-box-shadow 不存在。
刚试过... 看起来 ms-shadow-box 没有 'inset' 属性。盖拉：/
不要认为使用 css 是可能的。另请参阅：stackoverflow.com/questions/5800491/inner-shadow-to-div-in-ie
stackoverflow.com/questions/5617455/…

标签： html internet-explorer cross-browser css

【解决方案1】：

技巧是将背景图片放入html标签中。

这个 css3 示例将为您提供一个很好的褪色背景下拉效果，否则即使在 css3 浏览器中也经常使用 24 位 png 图像创建 - 然而，这更容易。 IE9、Firefox、Safari（适用于 windows）中的 Testet。

在这里测试和尝试：http://jsfiddle.net/LUDJF/

html {
        width:100%;
        height:100%;
        background:url('http://www.sequelsite.dk/mediafiles/sequelsite/white-grid-paper-background-pattern.jpg');
}

body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        box-shadow  : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
        -webkit-box-shadow: inset 0px 3000px 3000px -2800px rgba(255,0,0,0.5);
        -moz-box-shadow : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
        -o-box-shadow   : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
}

【讨论】：