每天一个CSS小技巧 - 不规则投影（ps不规则物体的投影怎么画）
当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。
这是原本的图形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 5.9em;
height: 5.2em;
margin: .6em;
background: #fb3;
font: 200%/1.6 Baskerville, Palatino, serif;
text-align: center;
}
.speech{
border-radius: .3em;
}
.speech:before{
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #fb3;
border-right-width: 0;
}
.dotted{
background: transparent;
border: .3em dotted #fb3;
}
.cutout {
border: .5em solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%23fb3">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="speech">Speech bubble</div>
<div class="dotted">Dotted border</div>
<div class="cutout">Cutout corners</div>
</body>
</html>当我们直接使用box-shadow时：
box-shadow: 2px 2px 10px rgba(0,0,0,.5);就会变成这样：
解决方案
这里我们引入一个叫filter的属性。是一个滤镜，只需要一些函数就可以很方便的制定滤镜效果。比如blur()、grayscale()以及我们需要的drop-shadow()。我们甚至可以把多个滤镜串联起来：
filter: blur() grayscale() drop-shadow();drop-shadow()滤镜可接受的基本参数跟box-shadow属性一样，但不包括扩张半径，不包括inset关键字，也不支持逗号分割的多层投影语法，所以我们这里把之前的box-shadow换成：
/*box-shadow: 2px 2px 10px rgba(0,0,0,.5);*/
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));