前言
前几天猛然看到一篇关于box-shadow的详解，我直呼我直呼，上次看到这么好的文章还是上次，那文章就像一篇文章，我赶紧评论了一条内容，看起来就像一条内容，我不禁感慨，原来这就是递归调用啊😂
box-shadow究竟能做什么
先看看官方的定义，box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。四个长度值分别四水平阴影位置，垂直阴影位置，模糊距离，阴影大小。
了解了这些属性就可以使用阴影来勾勒图案了，而我们也许只需要用到一个元素就可以了。
一个元素+box-shadow实现蝙蝠侠飞镖
首先我们需要使用向外的阴影绘制出蝙蝠的身体部位，那么显然在四个长度值中我们只需要阴影大小即可，效果如下：
接下来我们将中间的黑色区域，即我们实际的元素区域向上推移，作为蝙蝠的头部，那么给其一个垂直方向的阴影位置即可，效果如下：
现在中间凹进去的部位需要一个脑袋的部位了，我们使用伪类元素为其添加上一个长方形作为蝙蝠的小脑袋，效果如下：
最后我们需要为蝙蝠的脑袋添加一对耳朵，并且为它的翅膀做一些加工，依旧是万能的box-shadow，在上述的图案基础上，使用阴影切出四个左右对称的且与底色相同的圆形，思路如下：
我们看下最终的效果把
代码如下
//HTML
<body>
<P></P>
</body>
//css
*,
P::after,
P::before {
margin: 0;
padding: 0;
background-color: #191919;
position: absolute;
}
p {
width: 80px;
height: 30px;
top: 250px;
left: 600px;
border-radius: 0 0 10px 10px;
box-shadow: 0 82px 0 82px #f2ad43;
}
p::before {
content: '';
width: 20px;
height: 20px;
top: 10px;
left: 30px;
background-color: #f2ad43;
}
p::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 25px 5px #f2ad43,
45px 5px #f2ad43,
160px 45px 0 45px #191919,
95px 145px 0 85px #191919,
-25px 145px 0 85px #191919,
-90px 45px 0 45px #191919;
}
