「更多福利资讯查看：2024 首次大厂挑战」。
马上就要元宵节了，这里给大家用 css 端上一碗汤圆?
首先放一个 div（bowl_wrap），把我们要包裹的内容放在里面，需要它的原因是可以方便移动整体的位置，我这边将它放在页面的居中位置，以及对里面的元素进行位置调整（position）<div class="bowl_wrap">
....
</div>.bowl_wrap{
width: 200px;
height: 220px;
margin: 100px auto;
position: relative;
}
先画一个碗，这个碗呢我是分 3 个部分组合起来的，在一个圆的上半部分放一个椭圆，下面放一个 div，都是通过 border-radius 进行形状的改变<!-- 碗底 -->
<div class="bowl_bottom"></div>
<div class="bowl_body_wrap">
<!-- <div class="text">汤圆节快乐！</div> -->
</div>
<!-- 碗口 -->
<div class="bowl_rim">
...
</div>.bowl_rim{
position: absolute;
top: 0px;
width: 200px;
height: 135px;
background-color: rgb(247, 242, 235);
border: 2px solid black;
border-radius: 50% / 50%;
overflow: hidden;
}
.bowl_bottom{
position: absolute;
top: 196px;
left: 65px;
width: 70px;
height: 15px;
background-color: rgb(247, 242, 235);
border-radius: 0% 0% 80% 80%;
border: 2px solid black;
border-top: 0px solid black;
}
.bowl_body_wrap{
position: absolute;
width: 200px;
height: 200px;
background-color: rgb(247, 242, 235);
border: 2px solid black;
border-radius: 67% 68% 61% 62% / 48% 45% 86% 88% ;
}
.text{
margin-left: 60px;
margin-top: 160px;
color: w;
}
然后我们就开始制作汤圆，把它放进碗里（bowl_rim），超出的地方隐藏起来，汤圆的表情与很多，可以把每一个汤圆的表情都改变，我这个偷了个懒，都用的同一个
这里展示一下单个汤圆
<div class="bowl_rim">
<div class="two">
<div class="left_eye"></div>
<div class="right_eye"></div>
<div class="mouth">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<div class="left_blusher"><div class="blu1"></div><div class="blu2"></div></div>
<div class="right_blusher"><div class="blu1"></div><div class="blu2"></div></div>
</div>
</div>
汤圆的背景颜色可以根据自己的喜好更改，这里是黄色的（大黄豆皮～）
这个嘴巴就是用两个椭圆 div 旋转后，隐藏上半部分得到的
.mouth{position: absolute;top: 20px;left: 38px;width: 20px;height: 20px;overflow: hidden;}.mouth .circle1, .mouth .circle2{margin-top: -10px;width: 6px;height: 16px;border-radius: 50% / 50%;border: 2px solid black;transform: rotate(10deg);}.mouth .circle2{margin-left: 8px;margin-top: -20px;transform: rotate(-10deg);}`