box-shadow属性的一个应用

在前端开发工作中，经常会用到box-shadow。box-shadow是CSS3新增的一个属性，用于向框添加一个或者多个阴影，设置多个阴影时，中间需要将每个阴影用逗号隔开。语法如下：
box-shadow: h-shadow v-shadow blur spread color inset. 其中：
h-shadow: 阴影的水平位置
v-shadow：阴影的垂直位置
blur：阴影的模糊半径
spread：阴影的半径
color：阴影的颜色
inset：内部阴影，默认是外部阴影（outset）

向框添加一个或者多个阴影是box-shadow常见的使用场景，它也可以实现使用纯css绘制一些图形,比如上面的图片，就是使用纯CSS,利用box-shadow实现的。实现代码如下：

        .container {
            position: relative;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin: 300px auto;
            background-color: red;
            box-shadow: 0px 0px 0 1px #000,
                -42px 25px 0 -17px #000,
                -44px 25px 0 -17px #000,
                -46px 25px 0 -17px #000,
                -48px 25px 0 -17px #000,
                -50px 25px 0 -17px #000,
                -52px 25px 0 -17px #000,
                -54px 25px 0 -17px #000,
                -56px 25px 0 -17px #000,
                -58px 25px 0 -17px #000,
                -60px 25px 0 -17px #000,
                -62px 25px 0 -17px #000,
                -64px 25px