在前端开发工作中，经常会用到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 0 -17px #000,
-66px 25px 0 -17px #000,
-68px 25px 0 -17px #000,
-70px 25px 0 -17px #000,
-72px 25px 0 -17px #000,
-74px 25px 0 -17px #000,
-76px 25px 0 -17px #000,
-78px 25px 0 -17px #000,
-80px 25px 0 -17px #000,
-82px 25px 0 -17px #000,
-84px 25px 0 -17px #000,
-42px 47px 0 -17px #000,
-44px 47px 0 -17px #000,
-46px 47px 0 -17px #000,
-48px 47px 0 -17px #000,
-50px 47px 0 -17px #000,
-52px 47px 0 -17px #000,
-54px 47px 0 -17px #000,
-56px 47px 0 -17px #000,
-58px 47px 0 -17px #000,
-60px 47px 0 -17px #000,
-62px 47px 0 -17px #000,
-64px 47px 0 -17px #000,
-66px 47px 0 -17px #000,
-68px 47px 0 -17px #000,
-70px 47px 0 -17px #000,
-72px 47px 0 -17px #000,
-74px 47px 0 -17px #000,
-76px 47px 0 -17px #000,
-78px 47px 0 -17px #000,
-80px 47px 0 -17px #000,
-82px 47px 0 -17px #000,
-84px 47px 0 -17px #000,
-42px 69px 0 -17px #000,
-44px 69px 0 -17px #000,
-46px 69px 0 -17px #000,
-48px 69px 0 -17px #000,
-50px 69px 0 -17px #000,
-52px 69px 0 -17px #000,
-54px 69px 0 -17px #000,
-56px 69px 0 -17px #000,
-58px 69px 0 -17px #000,
-60px 69px 0 -17px #000,
-62px 69px 0 -17px #000,
-64px 69px 0 -17px #000,
-66px 69px 0 -17px #000,
-68px 69px 0 -17px #000,
-70px 69px 0 -17px #000,
-72px 69px 0 -17px #000,
-74px 69px 0 -17px #000,
-76px 69px 0 -17px #000,
-78px 69px 0 -17px #000,
-80px 69px 0 -17px #000,
-82px 69px 0 -17px #000,
-84px 69px 0 -17px #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 0 -17px #000,
66px 25px 0 -17px #000,
68px 25px 0 -17px #000,
70px 25px 0 -17px #000,
72px 25px 0 -17px #000,
74px 25px 0 -17px #000,
76px 25px 0 -17px #000,
78px 25px 0 -17px #000,
80px 25px 0 -17px #000,
82px 25px 0 -17px #000,
84px 25px 0 -17px #000,
42px 47px 0 -17px #000,
44px 47px 0 -17px #000,
46px 47px 0 -17px #000,
48px 47px 0 -17px #000,
50px 47px 0 -17px #000,
52px 47px 0 -17px #000,
54px 47px 0 -17px #000,
56px 47px 0 -17px #000,
58px 47px 0 -17px #000,
60px 47px 0 -17px #000,
62px 47px 0 -17px #000,
64px 47px 0 -17px #000,
66px 47px 0 -17px #000,
68px 47px 0 -17px #000,
70px 47px 0 -17px #000,
72px 47px 0 -17px #000,
74px 47px 0 -17px #000,
76px 47px 0 -17px #000,
78px 47px 0 -17px #000,
80px 47px 0 -17px #000,
82px 47px 0 -17px #000,
84px 47px 0 -17px #000,
42px 69px 0 -17px #000,
44px 69px 0 -17px #000,
46px 69px 0 -17px #000,
48px 69px 0 -17px #000,
50px 69px 0 -17px #000,
52px 69px 0 -17px #000,
54px 69px 0 -17px #000,
56px 69px 0 -17px #000,
58px 69px 0 -17px #000,
60px 69px 0 -17px #000,
62px 69px 0 -17px #000,
64px 69px 0 -17px #000,
66px 69px 0 -17px #000,
68px 69px 0 -17px #000,
70px 69px 0 -17px #000,
72px 69px 0 -17px #000,
74px 69px 0 -17px #000,
76px 69px 0 -17px #000,
78px 69px 0 -17px #000,
80px 69px 0 -17px #000,
82px 69px 0 -17px #000,
84px 69px 0 -17px #000,
-20px -26px 0 -10px #333,
-34px -40px 0 15px #fff,
-34px -40px 0 16px,
20px -26px 0 -10px #333,
34px -40px 0 15px #fff,
34px -40px 0 16px,
0px 55px 0 75px #fff,
0px 55px 0 76px #000,
0px 22px 0 120px #08dbeb,
0px 22px 0 121px #000
}
.container::before {
position: absolute;
content: '';
width: 2px;
height: 80px;
bottom: -81px;
left: 17px;
background-color: #000;
}
.container::after {
position: absolute;
content: '';
width: 125px;
height: 70px;
bottom: -83px;
left: -44px;
border-bottom: 2px solid #000;
border-bottom-right-radius: 28px;
border-bottom-left-radius: 28px;
}
</style>
<body>
<div class="container"></div>
</body>
这是之前在视频学习CSS的时候，所做的一个练习。