In front-end development work, box-shadow is often used. box-shadow is a new attribute of CSS3, which is used to add one or more shadows to the box. When setting multiple shadows, each shadow needs to be separated by a comma. The syntax is as follows:
box-shadow: h-shadow v-shadow blur spread color inset. Among them:
h-shadow: the horizontal position of the
shadow v-shadow: the vertical position of the
shadow blur: the blur radius of the
shadow spread: the radius of the
shadow color: the shadow The color
inset: inner shadow, the default is outer shadow (outset)
Adding one or more shadows to the box is a common use scenario for box-shadow. It can also be used to draw some graphics using pure css. For example, the picture above is implemented using pure CSS and box-shadow. The implementation code is as follows:
.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>
This is an exercise I did when I learned CSS in the video.