一、box-shadow

box-shadow是css3中新增的属性，用于增加边框阴影，让原有的元素变得更多样性，它名下有四位小弟，老大控制水平方向偏移，老二控制垂直方向偏移，老三控制模糊度，最小的老四控制阴影颜色。

其中老大老二老三是一组三胞胎，都是像素(px)家族的，而老大老二又是同卵，控制的都是阴影的偏移，老大正值向右偏移，负值向左偏移；老二正值向下偏移，负值向上偏移；老三是异卵，控制引用的模糊度，取值范围是(0,+∞)，当值为0的时候表示不模糊，值越大越模糊，当值小于0的时候，阴影消失。老四负责阴影颜色。一家子都在“挣钱养家”，只有老四负责“貌美如花”。

二、drop-shadow

drop-shadow也是css3特有的，用于投影，这里为什么说是投影而不是阴影呢？下面会提到。和box-shadow一样，它名下的家族完全复制过来就可以，成员和代表的意思都一样。

三、box-shadow和drop-shadow的区别

1.兼容性

box-shadow在IE9以上就支持了，基本上各大浏览器都支持，而drop-shadow在IE13以上才支持，而谷歌chrome浏览器暂时是不支持的，这是在我应用的时候发现的，在懵逼了几秒之后，决定用火狐FireFox试一下，居然成功了！因为使用的是mac系统，没有IE，所以，下面的展示就用FireFox来实现。

2.写法

box-shadow直接写就可以了，简单粗暴，比如：

box-shadow: 5px 5px 10px black;

drop-shadow就不一样了，就好比box-shadow是个成年能独立的人，能一手抓好多东西，而drop-shadow就是个还不能独立的小孩，出门得有大人领着，同时手小，带的东西不能一把抓，只能背个小书包把东西装里面，也就是用代码中的括号，比如：

filter：drop-shadow(5px 5px 10px black);

filter是滤镜的意思，具体的我就不在这讲了，有兴趣的可以参考一下菜鸟教程：http://www.runoob.com/cssref/css3-pr-filter.html

3.表现效果

在同样参数下，box-shadow和drop-shadow表现的效果是不一样的，下面用我喜欢的idol，前天刚入伍的TOP给大家演示一下：

box-shadow下：

drop-shadow下：

两张图片对比下你会发现，box-shadow的阴影在越接近图片边缘的时候比drop-shadow的越黑，而且阴影的宽度也相对drop-shadow的小，从上边界和左边界就能看出来，box-shadow的阴影几乎看不清，而宽度相对较宽的drop-shadow就能看到。

4.盒阴影和投影

这里就提到上面说的投影了。虽然shadow就是阴影的意思，但是在严格意义上讲，drop-shadow更应该说是投影，而什么是盒阴影，什么是投影，用语言可能表达不清楚，直接上图给你看就知道了。

先上一串代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            *{

                padding:;

                margin:;

            }

            .dash1{

                width: 50px;

                height: 50px;

                margin: 0 auto;

                border: dashed 10px #beceeb;

                box-shadow: 5px 5px 10px black;

            }

            .dash2{

                width: 50px;

                height: 50px;

                margin: 50px auto;

                border: dashed 10px #beceeb;

                filter: drop-shadow(5px 5px 10px black);

            }

        </style>

    </head>

    <body>

        <div class="dash1"></div>

        <div class="dash2"></div>

    </body>

</html>

展现的结果就是下面这样

box-shadow：

drop-shadow：

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把选中的所有的非透明区域都做了阴影效果，就相当于一种真正的投影，这里为了看得更清楚特意把边框弄成虚线，所以能看到凡是边框显示出来的部分，都有drop-shadow属性，这也就是为什么我说他是投影更确切。

四、结束语

关于box-shadow和drop-shadow的主要区别就这些，还有一些box-shadow特有的阴影叠加、内阴影效果什么的我就不说了，有兴趣的可以百度了解一下。知识点很小，但也是花了我一上午的时间组织语言，尽量让大家一看就懂，如果有什么不对的欢迎指出！第二篇博客随笔就此告终！撤~

关于box-shadow和drop-shadow的显著区别的更多相关文章

  1. 数据包分析中Drop和iDrop的区别

    数据包分析中Drop和iDrop的区别   在数据包分析中,Drop表示因为过滤丢弃的包.为了区分发送和接受环节的过滤丢弃,把Drop又分为iDrop和Drop.其中,iDrop表示接受环节丢弃的包, ...

  2. 面试突击58：truncate、delete和drop的6大区别

    在 MySQL 中,使用 truncate.delete 和 drop 都可以实现表删除,但它们 3 个的使用场景和执行效果完全不同,接下来我们来盘点一下. truncate.delete.drop区 ...

  3. Qt Quick里的图形效果：阴影（Drop Shadow）

    Qt Quick提供了两种阴影效果: DropShow,阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,把这个新图像放在源图像后面,给人一种源图像从背景上凸出来的效果. InnerShado ...

  4. OpenGL 阴影之Shadow Mapping和Shadow Volumes

    先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只 ...

  5. SqlServer--delete、truncate 、Drop删除表的区别

    --删除表中的全部数据,自动编号不清零. --1.delete from Biao --删除表中的全部数据,自动编号清零. --2.truncate table Biao --truncate特点: ...

  6. SQl中drop与truncate的区别

    在对SQL的表操作时,我们因不同的需求做出相应的操作. 我来对比一下truncate table '表明'与drop table '表格名'的区别,跟大家一起学习. drop table '表格名'- ...

  7. drop.delete.trauncat的区别

    delete删除数据,保留表结构,可以回滚,如果数据量大,很慢,回滚是因为备份了删除的数据(删除数据时有两个动作,删除和备份) truncate删除所有数据,保留表结构,不可以回滚,一次全部删除所有数 ...

  8. Oracle中drop user和drop user cascade的区别

    drop user : 仅仅是删除用户,drop user username cascade :会删除此用户名下的所有表和视图. userSpecify the user to be dropped. ...

  9. MySQL笔记-turncat、drop、delete的区别

    TRUNCATE 语法: TRUNCATE TABLE [schema.] table [{DROP | REUSE} STORAGE]功能: 删除整个表的数据并释放空间   描述: 由于Trunca ...

  10. drop user和drop user cascade的区别

    SQL> delete user itp2;delete user itp2       *第 1 行出现错误:ORA-00903: 表名无效 SQL> drop user itp2;dr ...

随机推荐

  1. react学习(二)之通信篇

    react性能提升原理:虚拟DOM react把真是的DOM tree,转化成virtual DOM,每次数据更新后,重新计算virtual DOM并与上一次的作对比,然后对发生改变的部分进行批量更新 ...

  2. oracle中row_number() over()

    ROW_NUMBER() OVER函数的基本用法语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN)简单的说row_number()从1开 ...

  3. web移动端，需要清楚设备像素比devicePixelRatio的应用

    我们这里所说的devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持. 概念 devicePixelRatio ,它是 ...

  4. Linux网络设备驱动的实现

    结论: 1.对一个设备驱动而言,主要从两个方面进行着手,一个是控制流,一个是数据流. 控制流就是如何控制网络设备,数据流则说的是报文的收发流程. 2.网络设备可以是Linux服务器的网卡,也可以是嵌入 ...

  5. 判断字符串a和b是否互为旋转词

    旋转词:把字符串str的任意部分移动到后面形成的新字符串叫做字符串str的旋转词. 比如abc的旋转词有 abc,acb,cba,... 判断str1和str2是否互为旋转词,其最优解可以是时间复杂度 ...

  6. 并发工具箱 concurrent包的原理分析以及使用

    1.java.util.concurrent 包下的类分类图 locks部分:显式锁(互斥锁和速写锁)相关: atomic部分:原子变量类相关,是构建非阻塞算法的基础: executor部分:线程池相 ...

  7. Android为TV端助力 关于Fragment你所需知道的一切！

    转载自刘明渊 的博客地址:http://blog.csdn.net/vanpersie_9987 Fragment 是 Android API 中的一个类,它代表Activity中的一部分界面:您可以 ...

  8. LRU(最近最少使用淘汰算法)基本实现

     LRU(Least Recently Used) 出发点:在页式存储管理中,如果一页很长时间未被访问,则它在最近一段时间内也不会被访问,即时间局部性,那我们就把它调出(置换出)内存. 为了实现LRU ...

  9. python语言学习---4

    第五天 1.任意个参数函数怎么敲? 只需定义一个可变参数即可:可变参数名字前要加 * ,可以传入0个或多个参数. #内部解释器原理:Python解释器会把传入的一组参数组装成一个tuple(不可变)传 ...

  10. WiFi的名词缩写

    http://blog.csdn.net/jayxujia123/article/details/12842295 无线网络最初采用的安全机制是WEP(有线等效私密),但是后来发现WEP是很不安全的, ...