使⽤CSS3的box-shadow实现双透明遮罩层对话框box-shadow介绍
在我之前的⼀篇⽂章中，介绍了实现双透明遮罩层效果的两种⽅法，分别是opacity和rgba。他们需要分别依赖于不同的html结构。
例如⽤opacity⽅法：。
我⼀度认为实现这种双遮罩层的效果必须需要借助background，事实上利⽤CSS3的box-shadow属性可以轻松模拟出这种效果。。
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:。
忧郁什么意思关于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 class="blue">
<div class="yellow"></div>
</div>
<div 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部分权当抛砖引⽟吧！
郑和下西洋的特点
（完）
