0

说到 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);
}
4

1 回答 1

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;
}

您将开始获得所需的效果。这是一个演示

于 2013-03-28T03:20:46.787 回答