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

  (完)

上一篇:zookeeper源码分析之四服务端(单机)处理请求流程


下一篇:MicroCube 风力发电装置