[CSS揭秘]不规则投影

难点

普通元素添加border-radius所生成的形状添加box-shadow的效果都非常完美。但是当普通元素添加了伪元素或者半透明的装饰之后，box-shadow就会有点力不从心。因为boder-radius会无耻地忽视透明部分。

场景:

1. 半透明图像，背景图像，border-image

2. 具有点状、虚线或者半透明的边框，但是没有背景

3. 伪元素生成的对话气泡

4. 切角形状

5. 折角形状

6. 菱形图像

 

解决不规则形状的投影，目前最简单的方法就是使用filter滤镜，使用CSS滤镜最大的好处就是平稳退化。

常用的filter滤镜函数包括: blur() grayscale() drop-shadow()

滤镜会把任何非透明的部分都打上投影, 所以不建议对文本单独再设置text-shadow, 同时这个text-shadow与box-shadow产生的shadow效果是两回事。

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

BOX-SHADOW

 

filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));

Filter

 

 

下次细讲 blur()   grayscale()