CSS3「提升角落」不透明度陰影效果

Question

我一直在玩一些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

問題是瞭解stacking contexts以及它們在瀏覽器中的呈現方式。

• 根元素（HTML），
• 定位（絕對或相對）具有比 「自動」 以外的z索引值，在移動設備上的WebKit
• 元件與opacity value less than 1.
• 和Chrome瀏覽器22+，位置：永遠定格創建一個新的堆疊內容，即使z-index的是 「自動」

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

1. 背景和形成堆疊 上下文的元素的邊界。
2. 孩子堆疊負面堆棧級別的情況下（大多數 負面的優先）。
3. 流入式，非內聯式，非定位後代。
4. 非定位花車。
5. 包含 內嵌表和內聯塊的流入內聯級別非定位後代。
6. 子堆疊上下文與堆電平0和定位 後代與堆電平0。
7. 子堆疊具有正堆水平上下文（至少 正的第一）。

的#test背景被第一，因爲這是不透明度被施加到元件呈現。之後，由於陰影處於新的疊加環境（position: absolute），因此陰影會處於頂峯。最後，div的文字。

一個簡單的辦法：將包裹格在另一個DIV和透明度適用於是 DIV而不是#test。

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

另一個好讀：What No One Told You About Z-Index

Answer 2

我能夠假解決這一通過添加div與「解除拐角」的容器的內部。這是一種破解，我想像別人可以提出更好的解決方案，但我想我會發布我的發現以防萬一有人好奇。

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

Answer 3

我不太知道這個討論說實話後，但我發現這篇文章：The stacking context。

據我所知，在你的榜樣與z-index: -2的伎倆只是工作，因爲你沒有在.drop-shadow設置z-index，這意味着它有沒有堆疊內容。通常，孩子（:before和:after也是某種孩子）的父母不能有較低的z-index，但如果父母沒有堆疊情境，則可以低於其父母。

與opacity的問題是，它形成堆疊上下文：

形成有堆疊環境，文檔中的任何地方，通過其是

• 根元素的任何元件（HTML ），
• 定位（絕對或相對）具有比「自動」以外的z索引值，
• 元件用的不透明度值小於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; 
}