使用CSS3的box-shadow实现双透明遮罩层对话框

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部分权当抛砖引玉吧！

　　（完）