box-shadow介紹
在我之前的一篇文章《從天貓和支付寶身上學習opcity與rgba》中，介紹了實現雙透明遮罩層效果的兩種方法，分別是opacity和rgba。他們需要分別依賴於不同的html結構。
例如用opacity方法：點我查看DEMO。
我一度認為實現這種雙遮罩層的效果必須需要借助background，事實上利用CSS3的box-shadow屬性可以輕松模擬出這種效果。再次查看Demo。
box-shadow: 0 0 0 20px rgba(0, 0 ,0 ,0.5);
五個參數依次代表：向右偏移量，向下偏移量，模糊度，陰影面積大小，顏色。
之前說過，rgba非常強大，除了可以作用在background-color上，還可以作用在box-shadow等顏色值上。現在使對話框的box-shadow的模糊度為0，既完全不模糊，並且使其陰影面積為20px，背景透明，即可為對話框模擬出一個20px寬的透明border。
可以給一個元素賦予多重box-shadow，這意味着從原則上來講，我們可以給元素模擬出N個border。
當然，雖然box-shadow可以模擬出border的效果，但它與border相去甚遠。在W3C盒模型中，border的寬度會影響到元素所占面積，在IE盒模型中，border的寬度會影響content所占面積。但是box-shadow會被元素占位計算所無視，無論有多寬的box-shadow,元素都不會加寬哪怕一點。當多個相鄰元素都有box-shadow時，他們的陰影便會根據元素的z-index進行遮蓋，在默認情況下時，后邊的元素的box-shadow會遮蓋住前邊的元素。
當元素設置了opacity屬性后，與其相關的border,background，以及子元素都會透明，box-shadow也會受其影響變為透明。
我們可以這樣理解，假如元素是集裝箱中擺放的一個個盒子的話，box-shadow就是盒子的影子，它不能占用集裝箱空間，但是它可以遮擋住其它盒子。
查看Demo:box-shadow的占位與層級。
關於z-index
剛才提到使用z-index來改變box-shadow的遮擋順序。其實改變的不是box-shadow，而是元素的層級。假如兩個元素重合，z-index高者會遮擋住低者。那么到底什么是z-index呢？
在 W3C CSS2.1 規范中，每個元素都具有三維的空間位置，除我們所熟悉的水平和垂直位置外，元素還可在 "Z軸" 方向上層層相疊、依次向前排開。
當然，並不是說頁面上所有的z-index會被統一管理。這里需要引入一個概念，叫做層疊上下文（stacking context）。同一個層疊上下文中，層疊級別大的顯示在上，層疊級別小的顯示在下，相同層疊級別時，遵循后來居上的原則(back-to-font);不同層疊上下文中，元素顯示順序以父級層疊上下文的層疊級別來決定顯示的先后順序。與自身的層疊級別無關;
如何創建一個層疊上下文？
1.當某個元素的 z-index 被顯示定義且不為auto，position 不為 static 時，會產生新的局部層疊上下文。
2.當opacity值小於1時，該元素會創建新的局部層疊上下文。
下面看一個在IE6-7中的bug示例：
<style> .blue{top:20px;height:50px;width:150px;background:blue; } .yellow{top:10px; left:20px;height:30px;width:100px;background:yellow;} .red{top:0;left:50px;height:100px;width:50px;background:red;} </style> <div style="position:relative" class="blue"> <div style="position:absolute;z-index:1;" class="yellow"></div> </div> <div style="position:absolute;" class="red"></div>
上面這段代碼在IE8+及符合W3C規范的標准瀏覽器中，從高到底依次是yellow,red,blue。而在IE6-7中，從高到底依次是red,yellow,blue。這是由於在IE6-7中，沒有設置z-index的定位元素仍然會創建一個層疊上下文。
另外需要特別注意的是，雖然opacity小於1時可以創建一個層疊上下文，會對其子元素的定位造成影響，但是它本身的z-index是無法設置的，在與同層疊上下文中的其它元素相比時，z-index應看作0或auto。當然，如果這個透明元素是定位元素的話，自然可以設置z-index了。
雖然我理解到了z-index之中的奧妙，但是可能文筆與實例不足，閱讀者如果有困惑可以閱讀下doyoe寫的文章：你需要了解的z-index世界。
我與之相比猶如螢火之於皓月，本文中介紹z-index部分權當拋磚引玉吧！
（完）