| 值 |
描述 |
| h-shadow |
必需。水平阴影的位置。允许负值 |
| v-shadow |
必需。垂直阴影的位置。允许负值 |
| blur |
可选。模糊距离 |
| spread |
可选。阴影的尺寸 |
| color |
可选。阴影的颜色。请参阅 CSS 颜色值 |
| inset |
可选。将外部阴影 (outset) 改为内部阴影 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
margin: 300px auto;
background-color: #C63D01;
box-shadow: 0px 0px 0 1px #000, /* x y 扩展 第三个参数是扩展 红鼻子边框 */
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,
44px 70px 0 -17px #000,
46px 70px 0 -17px #000,
42px 70px 0 -17px #000,
48px 70px 0 -17px #000,
50px 70px 0 -17px #000,
52px 70px 0 -17px #000,
54px 70px 0 -17px #000,
56px 70px 0 -17px #000,
58px 70px 0 -17px #000,
60px 70px 0 -17px #000,
62px 70px 0 -17px #000,
64px 70px 0 -17px #000,
66px 70px 0 -17px #000,
68px 70px 0 -17px #000,
70px 70px 0 -17px #000,
72px 70px 0 -17px #000,
74px 70px 0 -17px #000,
76px 70px 0 -17px #000,
78px 70px 0 -17px #000,
80px 70px 0 -17px #000,
82px 70px 0 -17px #000,
84px 70px 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,
-44px 70px 0 -17px #000,
-46px 70px 0 -17px #000,
-42px 70px 0 -17px #000,
-48px 70px 0 -17px #000,
-50px 70px 0 -17px #000,
-52px 70px 0 -17px #000,
-54px 70px 0 -17px #000,
-56px 70px 0 -17px #000,
-58px 70px 0 -17px #000,
-60px 70px 0 -17px #000,
-62px 70px 0 -17px #000,
-64px 70px 0 -17px #000,
-66px 70px 0 -17px #000,
-68px 70px 0 -17px #000,
-70px 70px 0 -17px #000,
-72px 70px 0 -17px #000,
-74px 70px 0 -17px #000,
-76px 70px 0 -17px #000,
-78px 70px 0 -17px #000,
-80px 70px 0 -17px #000,
-82px 70px 0 -17px #000,
-84px 70px 0 -17px #000,
-20px -26px 0 -10px #333333, /* 眼珠子 */
-34px -40px 0 15px #fff, /* 眼白 */
-34px -40px 0 16px, /* 眼框 */
20px -26px 0 -10px #333333,
34px -40px 0 15px #fff,
34px -40px 0 16px,
0px 55px 0 75px #fff, /* 大脸 */
0px 55px 0 76px #000,
0 22px 0 120px #08BDEB, /* 大脑袋 */
0 22px 0 121px #000;
}
/*叮当猫的竖线鼻子*/
.container::before{
content: '';
position: absolute;
bottom: -81px;
left: 17px;
height: 80px;
width: 2px;
background-color: #000;
}
/*叮当猫的嘴巴*/
.container::after{
content: '';
position: absolute;
bottom: -83px;
left: -44px;
width: 125px;
height: 70px;
border-bottom-right-radius: 28px;
border-bottom: solid 2px black;
border-bottom-left-radius: 28px;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
