关于css3 drop-shadow投影和box-shadow阴影的区别
drop-shadow和box-shadow
drop-shadow才是真正意义上的投影，而box-shadow只是盒子的阴影。二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。
如图所示：
属性参数
//语法 filter: drop-shadow(5px 5px 25px #999) box-shadow:5px 5px 25px #999,5px 5px 25px #999
filter: drop-shadow(x偏移 y偏移 模糊大小 色值); box-shadow: x偏移 y偏移 模糊距离 阴影的尺寸 阴影的颜色 内阴影;
drop-shadow和box-shadow的不同之处
1、兼容性
box-shadow兼容性较好。drop-shadow在IOS下可能没效果，也可能滑动时导致布局错乱的问题，不知道现在修复了没有。
2、属性叠加
box-shadow的属性可以叠加，而drop-shadow的属性只能有一个，如下：
box-shadow:1px 3px 5px #ccc,3px 5px 15px #f00; //No Problem drop-shadow:1px 3px 5px #ccc,3px 5px 15px #f00; //老子不干了
3、内阴影inset
box-shadow支持阴影属性inset，drop-shadow就不行。
4、PNG透明图片
通过上面的图片示例，其实已经可以看出，box-shadow的对整个盒子进行阴影处理，drop-shadow是对非透明区域进行阴影处理。实际的运用效果中，个人觉得drop-shadow效果更棒，但是兼容性需要注意。
相关内容
-
为什么grid-gap会导致溢出？
您有一个3列网格容器(.body):grid-template-columns:25%50%25%这些列的总宽度为100%。然后在列（和行）之间添加沟槽：grid-gap:10...
-
css3给背景图层加颜色遮罩的方法
（学习视频分享：css视频教程）在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<divcla...
-
使用CSS实现的几种进度条
（学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...
-
CSS3实现文字折纸效果的方法（代码示例）
本篇文章给大家通过示例介绍一下使用CSS3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。CSS3文字折纸代码如下，...
-
css3字体可以模糊吗
css3字体的可以模糊的；开发者可以使用CSS3中的filter属性来实现字体模糊效果，filter语法是“filter:blur(px);”，其filter属性定义了元素的可...
-
vs2010 如何支持css3
vs2010支持css3的方法：首先下载CSS3IntellisenseSchema并安装；然后用“Win+R”输入“regedit”打开注册表；接着将css30.xml拷贝到...
-
聊聊你可能不了解的CSS属性函数 attr()
本篇文章带大家了解一下CSS属性函数attr()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。属性函数attr()用于获取HTML元素里面的属性值,并用于样...
-
浅谈css3 device-width和width之间的差异
本篇文章和大家谈谈css媒体查询中device-width与width的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【推荐教程：CSS视频教程】1.d...
-
css3怎么设置元素背面不可见
在css3中，可以利用backface-visibility属性，通过给元素添加“backface-visibility:hidden;”样式来设置背面不可见。backface...
-
详细了解CSS3中的border-image-slice属性
【推荐教程：CSS视频教程】首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看...
