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

  (完)

使用CSS3的box-shadow实现双透明遮罩层对话框的更多相关文章

  1. html中设置透明遮罩层的兼容性代码

    说明:下面遮罩层的height视实际情况自行修改,要求显示的div层的样式需加上position:relative,位于遮罩层层div的下面一行.<div id="ceng" ...

  2. Virtual Box中 CentOS双网卡设置

    Virtual Box中 CentOS双网卡设置:   在Virtual Box中安装CentOS x86-64 6.4(final),配置了双网卡,eth0 为桥接模式 , eth1为内网模式   ...

  3. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  4. CSS3学习笔记(5)—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  5. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. iOS开发必备HUD(透明指示层)

    iOS开发必备HUD(透明指示层) 字数421 阅读2123 评论1 喜欢51 1.MBProgressHUD GitHub地址:https://github.com/jdg/MBProgressHU ...

  9. 解决css3遮罩层挡住下面元素事件的方法

    比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:poin ...

随机推荐

  1. 前端框架 EasyUI (0) 重新温习(序言)

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  2. 当忘记mysql数据库密码时如何进行修改

    因为长时间没有使用数据库了,或者把密码改完之后就忘了数据库密码,不能正常进入数据库,也无法修改密码,有一个简单的常用修改密码方式: 1.首先找到和打开mysql.exe和mysqld.exe所在的文件 ...

  3. Android调用微信登陆、分享、支付

    前言:用了微信sdk各种痛苦,感觉比qq sdk调用麻烦多了,回调过于麻烦,还必须要在指定包名下的actvity进行回调,所以我在这里写一篇博客,有这个需求的朋友可以借鉴一下,以后自己别的项目有用到也 ...

  4. javascript 笔记!

    1.通过javascript向文档中输出文本 document是javascript的内置对象,代表浏览器的文档部分 document.write("Hello Javascript&quo ...

  5. 设置Hyper-V和VMware多个服务之间共存

    这个方法是解决多个服务之间不能共存,下面相当于是以Hyper-V和VMware做例子,其他的也适用. 今天准备安装VMware Workstation 10,然后玩玩MAC OS. 没想到,淡定的我双 ...

  6. CYQ.Data V5 从入门到放弃ORM系列:教程 - MAction类使用

    背景: 随着V5框架使用者的快速增加,终于促使我开始对整个框架编写完整的Demo. 上周大概花了一星期的时间,每天写到夜里3点半,终完成了框架所有功能的Demo. 同时,按V5框架名称空间的顺序,对每 ...

  7. 腾讯云 安装mono

    一.yum -y update 运行出现以下错误: http://centos.tencentyun.com/contrib/x86_64/repodata/filelists.xml.gz: [Er ...

  8. 自定义Sublime Text的图标

    sublime text很赞,windows上最接近mac逼格的轻量编辑器,对于我这样比较喜欢格调的人来说,简直不二之选啊. 美中不足的是,看久了觉得它的图标似乎不是很上心.现在都流行扁平化了而它还停 ...

  9. Egret 集成第三方库 记录

    引入第三方库pureMVC 这次我们要使用到一个mvc开发框架-pureMVC,熟悉as3的朋友一定也对这个框架不陌生吧.不熟悉的也没关系,这个框架不是这次的主角.我们从 这里 下载pureMVC的T ...

  10. MailKit---获取邮件

    MailKit是一个免费开源的邮箱类库,简单来说MailKit帮我们封装了有关邮箱的一些帮助类,提供方法让我们更容易使用邮箱的Smtp,Imap等邮箱协议. 现在的邮箱基本上都使用smtp协议从邮件服 ...