关于box-shadow的一些深入使用

在以往的开发中 ‘box-shadow’这样的属性是经常使用的，相信大家都不陌生

但是最近的开发中遇到了这样的需求：

就是不规则形状的阴影，这种需要怎么实现呢

我的思路是：将一个正方形定位到左侧中间并且旋转，然后设置阴影

然后是这样可以看出右侧也有阴影产生这个明显不符合要求（box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1)）

查询资料后发现：box-shadow共存在5个参数：x-offset y-offset blur-size scale-size color，此处着重关注scale-size，这个属性控制产生阴影的大小  这个大小是已元素本身的宽高为基准，进行缩放后然后对阴影位置调整，最终的属性为：

box-shadow: -2px 2px 3px -1px rgba(0, 0, 0, 0.1);

 

over