-
属性
-
例子
-
png小图片变色
-
Q&A
-
关于兼容性
================================================================
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>
效果图如下:
======================================================================
除了上面的介绍,drop-shadow
滤镜还可以给元素或图片非透明区域添加投影。
原理如下:
对于背景透明的 png 小图片而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图片了吗?
然后,我们把原始图片隐藏在容器外面,投影图片在容器中间,给人的感觉就是换了颜色的图片。
大致原理如下图:
红色的是使用 drop-shadow
生成的投影,左边灰色的是原图,然后来一个向左偏移,再来一个 overflow:hidden
原图就隐藏掉了,只剩下一个红色的图。
=================================================================
1、在 Chrome 浏览器下,drop-shadow
有一个如下的呈现特性:
在 Chrome 浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其 drop-shadow 是不可见的。
实体部分哪怕有 1 像素可见,则 drop-shadow 完全可见。
所以:
-
text-indent 负值隐藏原始图,无投影,失败
-
clip 剪裁隐藏,无投影,失败
-
margin 负值隐藏原始图,无投影,失败
-
left 负值隐藏原始图,无投影,失败
通通不行,实现遇到了巨大的阻碍。
后来想,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)
于是,就尝试了经常带来意外惊喜的透明边框,结果是可喜的
因此,下面这一个 css 声明式千万不能少的:
border-right: 20px solid transparent;