PNG格式小图标的CSS任意颜色赋色技术和filter:drop-shadow实现尖角带阴影的提示面板效果

上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的：

原理其实很简单，使用了CSS3滤镜

filter

中的

drop-shadow

，

drop-shadow

滤镜可以给元素或图片非透明区域添加投影。

对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？

然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？

比方说本文的demo，如果把icon父级的的

overflow:hidden

去掉，原始的图标就暴露出来啦！

 

原理如上面，我一开始实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Chrome浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么。

在Chrome浏览器下，

drop-shadow

有一个如下的呈现特性：

在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。

所以，我试过：

• text-indent负值隐藏原始图，无投影，失败！
• clip剪裁隐藏，无投影，失败！
• margin负值隐藏原始图，无投影，失败！
• left负值隐藏原始图，无投影，失败！

通通不行，实现遇到了巨大的阻碍。

后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）？

于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！

因此，下面这一个CSS声明是千万不能少的：

[code]border-right: 20px solid transparent;

IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，Android4.4+支持。也就是，基本上，移动端现在可以使用这种技术了。

既节约了流量，也让我们的开发更简单，维护更方便了。

[code]filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

CSS代码：

[code].icon {
display: inline-block;
width: 20px; height: 20px;
overflow: hidden;
}
.icon-del {
background: url(delete.png) no-repeat center;
}
.icon > .icon {
position: relative;
left: -20px;
border-right: 20px solid transparent;
-webkit-filter: drop-shadow(20px 0);
filter: drop-shadow(20px 0);
}

HTML代码：

[code]<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>
<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

filter:drop-shadow实现尖角带阴影的提示面板效果

CSS代码：

[code].box {
margin: 40px; padding: 50px;
background-color: #fff;
position: relative;
font-size: 24px;
}
.cor {
position: absolute;
left: -40px;
widtd: 0; height: 0;
overflow: hidden;
border: 20px solid transparent;
border-right-color: #fff;
}
.box-shadow {
box-shadow: 5px 5px 10px black;
}
.drop-shadow {
filter: drop-shadow(5px 5px 10px black);
}

HTML代码：

[code]<div class="box box-shadow">
<i class="cor"></i>
box-shadow
</div>
<div class="box drop-shadow">
<i class="cor"></i>
filter: drop-shadow
</div>

阴影 vs 盒阴影

实践出真知，下面我们用CSS 

border

写一个虚线框，例如：

[code]border: 10px dashed #beceeb;

结果长相如下：

然后，我们分别应用

box-shadow

和

drop-shadow

滤镜：

[code]border: 10px dashed #beceeb; box-shadow: 5px 5px 10px black;

[code]border: 10px dashed #beceeb; filter: drop-shadow(5px 5px 10px black);

结果：

怎么样？是不是本性暴露了！

box-shadow

顾名思意“盒阴影”，只是盒子的阴影；你想啊，这盒子中间明明是透明的，结果，阴影的时候，居然光线没有穿透；但是

drop-shadow

就符合真实世界的投影，非透明的颜色，我就有投影；透明部分，光线穿过，没投影，而什么盒子不盒子的，跟我没有任何关系。

drop-shadow

不仅可以穿透代码构建的元素的透明部分，PNG图片的透明部分也是可以穿透的

阅读更多