一、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. HDU 4764 Stone(巴什博奕)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  2. MySql数据库实现分布式的主从结构

    最近学习了关于使用MySql数据的实现主动结构的原理,在以前的并发访问低的场景一下,一般一台性能高的服务器作为一个MySql数据,就可以满足业务的增删改查场景,但是随着网络用户的增加 当出现高并发,高 ...

  3. WPF控件库：图片按钮的封装

    需求:很多时候界面上的按钮都需要被贴上图片,一般来说: 1.按钮处于正常状态,按钮具有背景图A 2.鼠标移至按钮上方状态,按钮具有背景图B 3.鼠标点击按钮状态,按钮具有背景图C 4.按钮处于不可用状 ...

  4. 【Spring源码解读】bean标签中的属性（二）你可能还不够了解的 abstract 属性和 parent 属性

    abstract 属性说明 abstract 在java的语义里是代表抽象的意思,用来说明被修饰的类是抽象类.在Spring中bean标签里的 abstract 的含义其实也差不多,表示当前bean是 ...

  5. DOIS 2018 — OneAPM 蓝海讯通以数据为中心的 AIOps 平台亮相

    AIOps 近两年开始在运维圈子里面火了起来.一夜间传统和新兴的运维管理软件供应商,IT 运维系统开发商,大数据厂商,人工智能算法提供商,还有 BAT,大家都在谈论这个话题.在短短的不到 1 年时间中 ...

  6. CentOS基本的命令与快捷建

    由于我的计算机在安装linux系统时,计算机出现了问题,并没有安装ubuntu而是安装的centos.虽然两者属于linux的不同版本,但是在具体的操作上大同小异.在学习linux的各种指令和快捷键的 ...

  7. java中的泛型与反射

    在java开发中,大多数情况是多人开发,那么如何在没有API的情况下,快速的理解到别人开发的一些类的详细信息呢? 比如函数名,类名,返回参数等等 我们可以定义一个反射机制的类,通过此类来打印此你想要操 ...

  8. postgre中类似oracle的sql%rowcount用法

    get diagnostics cnt := row_count; 现在有两个表tab1和tab2,两个表的格式相同,tab1中有1000条数据,tab2中0条数据 创建测试功能函数 create o ...

  9. [C#]关于路径的几则笔记

    测试环境 本文基于windows下的操作 windows 7 x64 unity 5.3.7p4 获取文件的路径 比如一个文件的路径为:e:\3d\client\trunk\Product\Apps\ ...

  10. 3d max 动作Take 001改名

    问题描述 带动作的Fbx文件导入Unity之后,动作名字为Take 001,如下所示: 在max那边是没有办法改名的,只能在Unity中改名. 方法1 1. 选中动画文件,按Ctrl + D,复制一份 ...