属性
css3 属性：filter: drop-shadow 滤镜
要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。
filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异
例如：
filter:drop-shadow(5px 5px 10px black)
drop-shadow没有内阴影效果drop-shadow不能阴影叠加
例子
下面看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
margin: 40px; padding: 50px;
background-color: #fff;
position: relative;
font-size: 24px;
}
.cor {
position: absolute;
left: -40px;
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-right-color: #fff;
}
.drop-shadow {
filter: drop-shadow(5px 5px 10px black);
}
</style>
</head>
<body>
<div class="box drop-shadow">
<i class="cor"></i>
filter: drop-shadow
</div>
</body>
</html>
效果图如下：
png小图片变色
除了上面的介绍，drop-shadow滤镜还可以给元素或图片非透明区域添加投影。
原理如下：
对于背景透明的 png 小图片而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图片了吗？
然后，我们把原始图片隐藏在容器外面，投影图片在容器中间，给人的感觉就是换了颜色的图片。
大致原理如下图：
红色的是使用 drop-shadow 生成的投影，左边灰色的是原图，然后来一个向左偏移，再来一个 overflow:hidden 原图就隐藏掉了，只剩下一个红色的图。
Q&A
1、在 Chrome 浏览器下，drop-shadow 有一个如下的呈现特性：
在 Chrome 浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的。
实体部分哪怕有 1 像素可见，则 drop-shadow 完全可见。
所以：
- text-indent 负值隐藏原始图，无投影，失败
- clip 剪裁隐藏，无投影，失败
- margin 负值隐藏原始图，无投影，失败
- left 负值隐藏原始图，无投影，失败
通通不行，实现遇到了巨大的阻碍。
后来想，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）
于是，就尝试了经常带来意外惊喜的透明边框，结果是可喜的
因此，下面这一个 css 声明式千万不能少的：
border-right: 20px solid transparent;
关于兼容性
IE13+ 支持，Chrome 和 FireFox 浏览器支持，移动端 ios 支持，Android 4.4+ 支持。也就是，基本上，移动端现在可以使用这种技术了。
既节约了流量，也让我们的开发更简单，维护更方便了。
---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo
，或者手动search群号：685486827
-------------------------------- (完)--------------------------------------
我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu
更多学习资源请关注我的新浪微博…