Internet Explorer 上的 CSS 错误阴影效果（纸张卷曲）

Question

我正在尝试像这样实现页面卷曲：

我遵循了这个例子：http://codepen.io/anon/pen/fpjoa

如果我创建新的 PHP 和 CSS 文件并从上面的链接复制 - 粘贴代码，结果是正确的，如预期的那样。但如果我在我的 Wordpress 网站上使用此代码，它不适用于 Internet Explorer，请看下图：

正如你在上面看到的，右边的角落出了问题。你知道为什么会发生吗？也许我应该为 IE 改变一些东西？但是为什么上面链接中的示例与 IE 一起正常工作？

我在 page-wrap 上使用 css -> content-wrapper 类如下：

.page-wrap .content-wrapper {
    position: relative;  
    background: white;/* #f0ab67;*/
    border:1px solid lightgray;
    padding: 50px;
    margin: 0 auto 20px auto;  
}
.page-wrap .content-wrapper:before, 
.page-wrap .content-wrapper:after {
    position: absolute;
    width: 48%;
    height: 10px;
    content: ' ';
    left: 20px;
    bottom: 40px;      
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;

    -webkit-transform: skew(-5deg) rotate(-3deg);
    -moz-transform: skew(-5deg) rotate(-3deg);
    -ms-transform: skew(-5deg) rotate(-3deg);
    -o-transform: skew(-5deg) rotate(-3deg);
    transform: skew(-5deg) rotate(-3deg);
    -webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    z-index: -1;
}
.page-wrap .content-wrapper:after {
    left: auto;
    right: 20px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: skew(5deg) rotate(3deg);
    -moz-transform: skew(5deg) rotate(3deg);
    -ms-transform: skew(5deg) rotate(3deg);
    -o-transform: skew(5deg) rotate(3deg);
    transform: skew(5deg) rotate(3deg);
}

注意：我使用的是 Sydney 主题。

Answer 1

CBroe 怎么说，没有例子很难。但也许这个解决方案对你有用：

.test {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 150px;
  border: 1px solid #ccc;
  background: #fff;
}

.test:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 12px;
  width: 45%;
  height: 20px;
  background: #777;
  -webkit-box-shadow: 0 15px 19px #aaa;
  -moz-box-shadow: 0 15px 19px #aaa;
  box-shadow: 0 15px 19px #aaa;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.test:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 12px;
  width: 45%;
  height: 20px;
  background: #777;
  -webkit-box-shadow: 0 15px 19px #aaa;
  -moz-box-shadow: 0 15px 19px #aaa;
  box-shadow: 0 15px 19px #aaa;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

<div class="test">Test</div>