CSS3“解禁角落”下拉阴影不透明度(CSS3 “Lifted Corners” Drop-Shad

我一直在玩一些CSS3下拉阴影效果。 我非常喜欢的“解禁的角落”的效果，但试图不透明度增加的元素，当我遇到了一个问题。 我的问题是：有没有一种方法来创建一个不透明元素上的“解禁的角落”的效果？

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

Answer 1:

这个问题是理解堆叠内容以及他们是如何在浏览器中呈现。

• 根元素（HTML），
• 定位（绝对或相对）具有比“自动”以外的z索引值，
• 与元件的不透明度值小于1。
• 在移动的WebKit和Chrome 22+，位置：永远定格创建一个新的堆叠内容，即使z-index的是“自动”

9.9.1指定堆栈级：“的z-index”属性

1. 背景和形成堆叠环境的元素的边界。
2. 孩子，层叠具有负的堆级别上下文（最负第一）。
3. 中流动的，非行内，非定位后代。
4. 非定位浮动。
5. 中流动，行内的非定位后代，包括内联表和内联块。
6. 孩子堆叠内容与堆栈级别为0，并与堆栈级0的定位后代。
7. 子堆叠上下文有正的堆水平（至少正第一）。

背景#test正在第一渲染，因为这是不透明度被施加到所述元件。 在此之后，影子在上面走，因为他们是在一个新的堆叠内容（ position: absolute ）。 最后，div的文本。

一个简单的解决方案：将包裹在div在另一个DIV和应用不透明度为该分区，而不是#test 。

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

另一个好读： 什么没有人告诉你关于Z-指数

Answer 2:

经过讨论，我不太确定这是诚实的，但我发现这篇文章： 堆叠上下文 。

据我所知，与招z-index: -2在你的例子只是工作，因为你没有设置z-index上.drop-shadow ，这意味着它有没有堆叠内容。 通常一个孩子（ :before和:after是某种孩子太）不能具有较低z-index比它的父母，但它可以是下面如果家长没有堆叠内容。

这个问题opacity是，它形成堆叠内容：

的堆叠上下文被形成，在文档中的任何地方，通过其是任何元件

• 根元素（HTML），
• 定位（绝对或相对）具有比“自动”以外的z索引值，
• 用的不透明度值小于1的元素（...），
• ...

随着中说，你可以解决通过使用包装

<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 “Lifted Corners” Drop-Shadow with Opacity