Question

我正在研究的网站需要对某些面板使用某种阴影效果。我在网上找到了所需的CSS阴影，但我注意到它有一些问题 - 当目标div非常高时，阴影在它背后突然出现。

我发现阴影是由两个投射阴影的纯色矩形物体构成的。它们以一定的角度隐藏在div后面，形成了“卷曲”的纸张般的阴影效果。当与非常高的div块一起使用时，该角度也会使它们弹出。

我对CSS不是很好，所以我不知道如何解决这个问题。我已经尝试限制矩形max-height属性，但这使得它们太短而不能在div下面留下任何阴影。有没有办法让盒子粘在div的底部，永远不会伸展到它的两侧？

这是我用过的影子：

.shadow {
position: relative;
}
.shadow:before, .shadow:after {
    z-index: -1;
    position: absolute;
    content:"";
    bottom: 12px;
    left: 7px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
    -moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
     box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
     -webkit-transform: rotate(-4deg);
     -moz-transform: rotate(-4deg);
     -o-transform: rotate(-4deg);
     -ms-transform: rotate(-4deg);
      transform: rotate(-4deg);
}
.shadow:after {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    right: 7px;
    left: auto;
}

你可以在这个小提琴中看到一个例子，第一个div显示阴影正常工作，第二个显示问题：jsfiddle

Answer 1

而不是top: 80%;，您可以设置一个较小的高度，例如height: 20px;：

.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content: "";
bottom: 12px;
left: 7px;
width: 50%;
height: 20px;
/* top: 80%; */
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}

Answer 2

您可以删除伪元素上的top属性并为它们指定固定高度。您还可以为伪元素赋予max-height值，以确保它们在短的时候不会溢出div：

<强> DEMO

.box {
    background-color: #3a6fa9;
    display: block;
    padding: 4px;
    margin-bottom: 30px;
    margin-left: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 500px;
    height: 300px;
}
.box-tall {
    width: 500px;
    height: 2000px;
}
.shadow {
    position: relative;
}
.shadow:before, .shadow:after {
    z-index: -1;
    position: absolute;
    content:"";
    bottom: 12px;
    height:100px;
    max-height:10%;
    left: 7px;
    width: 50%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
    -moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
    box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
.shadow:after {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
    right: 7px;
    left: auto;
}

Answer 3

您的小提琴已更新：http://jsfiddle.net/e6yh07pd/3/

问题是

top:80%;

你拥有的价值。无法理解你为什么使用它...已经删除它并且只为你的之后和之前添加一个固定的高度（px）

抬起的角落阴影延伸到侧面

3 个答案: