drop-shadow 详解

属性

css3 属性：filter: drop-shadow 滤镜
要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。

---

filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异
例如：

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

• 1

---

• drop-shadow没有内阴影效果
• drop-shadow不能阴影叠加

效果图如下：

---

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;