0

我能够使用 CSS 为 DIV 制作提升的角落。这是jsfiddle链接 这里

我需要设计许多子 DIV，它们也像父级一样抬起角。我怎样才能做到这一点？

4

2 回答 2

2

理想情况下，您希望您的代码达到 simone 的答案可以工作的程度。不过，要达到这一点可能需要一些工作！

您的第一个问题源于您的drop-shadow和lifted类不独立的事实。您需要将一个（修改后的）drop-shadow类附加到任何div您希望阴影出现的地方，正如您在这个丑陋的 JSFiddle中看到的那样。

但是，我不得不对您的drop-shadow课程进行修改。我所做的是去掉drop-shadow:before, drop-shadow:after选择器上的“z-index”值，它隐藏了 child 上的阴影div。

从这里，我们可以看到我们需要进行的第一个编辑。您需要添加

.lifted:after,
.lifted:before {
    position: absolute;
    content: "";
}

这是使阴影可见所必需的（请记住，如果不设置before和伪元素将不会显示）。但这还不够。原因是您的定位是将两个阴影放在彼此之上。aftercontentabsolute

转到这个 JSFiddle并从孩子中添加/删除lifted类，div看看我的意思。

这个 JSFiddle几乎修复了它，但是您应该看到这个问题和答案，看看为什么它没有！您应该能够使用它来解决您的问题。

于 2012-10-15T20:28:36.893 回答
1

您的 jsFiddle 中有一个.lifted类。您可以在其他所有需要的类中使用相同的类div。

于 2012-10-15T20:10:14.937 回答