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

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

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

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

问题是理解堆叠上下文 https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context以及它们如何在浏览器中呈现。

• 根元素（HTML），
• 使用“auto”以外的 z-index 值（绝对或相对）定位，
• 元素与不透明度值小于1。 http://www.w3.org/TR/css3-color/#transparency
• 在移动 WebKit 和 Chrome 22+ 上，position:fixed 始终会创建新的堆叠上下文，即使 z-index 为“auto”

9.9.1 指定堆栈级别：'z-index'属性 http://www.w3.org/TR/CSS2/visuren.html#z-index

1. 形成堆叠的元素的背景和边框 语境。
2. 具有负堆栈级别的子堆栈上下文（大多数 先负数）。
3. 流入、非内联级别、非定位后代。
4. 非定位浮动。
5. 流入、内联级别、非定位后代，包括 内联表和内联块。
6. 堆栈级别为 0 且定位的子堆栈上下文 堆栈级别为 0 的后代。
7. 具有正堆栈级别的子堆栈上下文（至少 积极第一）。

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

一个简单的解决方案：是将 div 包裹在另一个 div 中并应用不透明度thatdiv 而不是#test.

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

另一本好读的书：没人告诉你关于 Z-Index 的事 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/