css3 filter : drop-shadow 属性

css3 filter : drop-shadow 属性

我们知道box-shadow设置的是盒阴影
比如我们为如下图片设置一个阴影
我们使用box-shadow:10px 10px 24px 10px rgba(0, 0, 0, 0.25);
如下显示

大家可以看到box-shadow为图片设置了一个盒阴影,盒子中间明明是透明的,结果阴影居然

没有给我们的logo加上.

那有没有什么办法设置一个贴边阴影呢?

答案是有的!!!

使用css3 为我们提供的filter属性
参数跟box-shadow差不多

 drop-shadow(x偏移, y偏移, 模糊大小, 色值)
 
 filter: drop-shadow(5px 5px 10px black)

所以说drop-shadow才是真正的投影, 它是根据像素点来给图片设置阴影的

兼容性

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