阴影效果不起作用

Question

在CSS方面，我是新手。任何一天给我一个PHP脚本！ 我需要一些帮助，我已经浏览了互联网，并提出了一个明确的解决方案，为图像添加阴影。但是，它不起作用。我想我的CSS在某个地方有冲突。 你能看看我的jcfiddler并指出我正确的方向吗？ 这是我想要的效果......

JCFiddler/z83Md/1/

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: #D4E6F4;
    font-size: 13px;
    line-height: 15px;
}
body:before {
    /* top shadow */
    content:"";
    position: fixed;
    top: -20px;
    left: -10px;
    width: 110%;
    height: 20px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    z-index: 100;
}
.image {
    background: #ddd;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: rgba(0, 0, 0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
}
.image:before, .image:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.image:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

Answer 1

您在:before和:after伪选择器上添加阴影的原因是什么？如果您将代码移至：

.image {
    background: #ddd;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: rgba(0, 0, 0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 1);
    box-shadow:0 15px 10px rgba(0, 0, 0, 1);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.image:before, .image:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
}

您将开始获得所需的效果。这是demo