Question

我一直在玩一些CSS3阴影效果。我非常喜欢“提升的角落”效果，但在尝试为元素添加不透明度时遇到了一个问题。我的问题是：有没有办法在具有不透明度的元素上创建“提升角”效果？

.drop-shadow{
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after{
    content:"";
    position:absolute;
    z-index:-2;
}
.lifted{
    -moz-border-radius:4px;
    border-radius:4px;
}
.lifted:before,
.lifted: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);
}
.lifted: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

问题在于理解stacking contexts以及它们在浏览器中的呈现方式。

根元素（HTML），

定位（绝对或相对）z-index值不是“auto”，

具有opacity value less than 1.
的元素
在移动WebKit和Chrome 22+上，position：fixed总是创建一个新的堆叠上下文，即使z-index是“auto”

9.9.1 Specifying the stack level: the 'z-index' property

形成堆叠的元素的背景和边界   上下文。

具有负堆栈级别的子堆叠上下文（大多数   否定第一）。

流入的，非内联级别，未定位的后代。

未定位的花车。

流入的，内联级别，未定位的后代，包括   内联表和内联块。

堆叠级别为0且定位的子堆叠上下文   堆栈级别为0的后代。

具有正堆栈级别的子堆叠上下文（最少   积极的第一）。

首先渲染#test的背景，因为这是应用不透明度的元素。之后，阴影位于顶部，因为它们位于新的堆叠上下文中（position: absolute）。最后，div的文本。

一个简单的解决方案：将div放在另一个div中，并将不透明度应用于 div而不是#test。

http://jsfiddle.net/WAvZu/3/

另一个好读：What No One Told You About Z-Index

Answer 2

讨论结束后我不太确定这一点，但我找到了这篇文章：The stacking context。

据我所知，您示例中z-index: -2的诀窍正常，因为您没有在z-index上设置.drop-shadow，这意味着它没有堆叠上下文。通常情况下，孩子（:before和:after也是某种孩子）不能低于其父级z-index，但如果父级没有堆叠上下文，则可能低于此级。

opacity的问题是，它形成了堆叠上下文：

通过
中的任何元素，在文档中的任何位置形成堆叠上下文

根元素（HTML），

定位（绝对或相对）z-index值不是“auto”，

不透明度值小于1的元素。（...），

...

话虽如此，你可以work around by using a wrapper

<div class="wrapper">
    <div class="drop-shadow lifted">This is correct with opacity.</div>
</div>

并在那里设置opacity。

.wrapper {
    opacity: .5;
}

Answer 3

我能够通过在容器内部添加div以及“抬起的角落”来伪造解决方案。这是一个黑客，我想其他人可以提出一个更好的解决方案，但我想我会发布我的发现，万一有人好奇。

http://jsfiddle.net/WAvZu/2/

CSS3“提升角落”阴影与不透明度

3 个答案: