一、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. spring-framework-中文文档一:IoC容器、介绍Spring IoC容器和bean

    5. IoC容器 5.1介绍Spring IoC容器和bean 5.2容器概述 本章介绍Spring Framework实现控制反转(IoC)[1]原理.IoC也被称为依赖注入(DI).它是一个过程, ...

  2. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  3. jQuery的一生

    jQuery 1.什么是jQuery? 是轻量级的,兼容多浏览器的JavaScript库,使用户能够方便的处理HTML Document,Events,实现动画效果,方便进行Ajax交互,能够极大地简 ...

  4. Mac上Homebrew的安装

    Mac系统版本: 10.14.2 下载brew_install 访问:https://raw.githubusercontent.com/Homebrew/install/master/install ...

  5. 28.Odoo产品分析 (四) – 工具板块(1) – 项目(1)

    查看Odoo产品分析系列--目录 "项目管理"是一个用于管理你的项目,且将它们与其他应用关联起来的非常灵活的模块,他允许您的公司管理项目阶段,分配团队,甚至跟踪与项目相关的时间和工 ...

  6. C# 实现连连看功能

    本文是利用C#实现连连看的小例子,以供学习分享使用.如有不足之处,还望指正. 思路: 初始化布局(横竖十行十列,共100个单元格,每一个格一个按钮,背景图为水果图片,随机生成) . 初始化对应棋盘(用 ...

  7. Windows服务System权限下在当前用户桌面创建快捷方式C#实例程序

    Windows服务一般运行在System权限下,这样权限比较高,方便执行一些高权限的操作. 但是,Environment.GetFolderPath等函数获取的也是System用户下的,而不是当前用户 ...

  8. 方向键控制圆球运动（简易）（js）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Spark Shuffle机制

    Spark Shuffle 一.HashShuffle 普通机制:产生磁盘小文件的数量为:M(map task number)*R(reduce task number) 过程: 1.map task ...

  10. Eclipse启动时发生An internal error occurred duri ng: "Initializing Java Tooling ----网上的坑爹的一个方法

    补充一下: 上面的方法不行. 我的个人解决方法 出现这种问题的原因,我的是eclipse换了,工作目录还是用之前的那个 把build Automatically的钩去掉 假设我们是用之前的worksp ...