html - Internet Explorer 上的 CSS 错误阴影效果(纸张 curl )

Question

我正在尝试像这样实现页面 curl :

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

如果我创建新的 PHP 和 CSS 文件并从上面的链接复制粘贴代码，结果是正确的，如预期的那样显示。但是，如果我将此代码用于我的 Wordpress 网站，它无法与 Internet Explorer 一起使用，请查看下图:

如您所见，右 Angular 出错了。你知道为什么会这样吗？也许我应该为 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);
}

注意:我使用的是悉尼主题。

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>