CSS实现一个猕猴桃和它的小姑娘
我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
有一天，我没招谁没惹谁地逛着掘金，突然发现，掘金又有一个新羊毛可以薅！
这我能错过吗，我必不能。
我就冥思苦想这个创意啊，头发掉了好几根（一根5块），这个时候公司群里突然传来一声：
好的，就它了！
不过由于本人水平有限，难以还原真实猕猴桃。。。于是火速上iconfont找了个全站最帅猕猴桃！
没错，就是它！
开始还原
首先，先把代码给各位老爷过一眼：
1. HTML结构
HTML结构包括猕猴桃主体、猕猴桃上下的两个揪揪、两只眼睛、嘴、左右两个脸颊、猕猴桃小姑娘（至于它为什么是小姑娘，而不是小伙子，，，是因为我乐意）。
猕猴桃身上的一些主要元素都是通过 i 标签给相应的样式实现的，具体实现见CSS部分。
2. CSS实现
2.1 猕猴桃主体
猕猴桃主体的css样式：宽高、背景色、边框和圆角。
【注：猕猴桃的胖瘦取决于它的宽高】
2.2 猕猴桃上下两个小揪揪
猕猴桃上下两个小揪揪的css样式：宽高、背景色、边框和圆角，以及位置。通过调整揪揪的位置去压住猕猴桃主体的边框，展示成两个揪揪和主体是一体的。
2.3 猕猴桃的两只眼睛
猕猴桃的两只眼睛的css样式：宽高、背景色和圆角，以及位置。
2.4 猕猴桃的嘴
猕猴桃的嘴的css样式：宽高、边框和圆角，以及位置。
2.5 猕猴桃的脸颊
猕猴桃的两个脸颊的css样式：宽高、背景色和圆角，以及位置。
【注：看到这里，大猕猴桃就画好了！】
2.6 猕猴桃小姑娘
- 首先画一下小姑娘的底色：
-
这部分主要是通过对一个宽高比为 1 : 2 的矩形做调整，样式给一下圆角，形成一个半圆形，而后旋转角度并调整其位置，使其无缝贴合到大猕猴桃的脸上。
-
不得不说，这个小猕猴桃的底色往这一放，我就想起了当初被智齿支配的恐惧
，它就像我的智齿撑肿我帅气的脸庞一样，撑肿了大猕猴桃的脸。
- 然后开始画猕猴桃小姑娘的美丽容颜：
- 小姑娘的css样式：宽高、背景色、边框和圆角，以及位置。
- 没错，猕猴桃小姑娘是个小绿脸 🤢，因为它是猕猴桃 🥝。
- 然后画出它的果核：
- 果核的css样式：宽高、背景色和圆角，以及位置。
- 最后画出黑色的小种子：
- 黑色小种子的css样式：宽高、背景色、边框和圆角，以及位置。
- 这部分主要是通过给一个圆以黑色点状边框，形成小猕猴桃的黑色小种子。
结束感言
👏👏👏
恭喜我！
到这里！
一个猕猴桃和它的小姑娘就画好了！
一个摸鱼好手牺牲了自己的摸鱼时间！
为css世界又贡献了一大一小两个猕猴桃！
Over.
