我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

熊猫是我国的国宝，同时也是我们表情包界的顶流，相信大家对这个熊猫头并不陌生吧，今天我将带领大家用 CSS 画一只简单的大熊猫来。

效果预览

思路解析

我们先看看熊猫的整体，无一不体现它的圆润，好家伙，除了人以外的生物，圆起来都可爱。

那么“圆”也是熊猫的一个特点，用几何来表示的话，这只大熊猫基本上全是由椭圆构成。圆圆的耳朵，圆圆的脑袋，圆圆的身体，圆圆的四肢，圆圆的腮红（又是一个细节啦）。

几何结构分析完后，相信大家都知道，我们要想用 CSS 画出大熊猫，首先要会画圆。相信在座的各位都知道盒模型，每个元素都会被表示为一个矩形盒子，我们给这个元素指定宽高，得到的会是一个“盒子”形状，有棱有角的，倘若我们想要把这个角磨平，就要靠另一个 CSS 属性 border-radius 啦。

开发中我们经常以 border-radius: 4px 类似这种形式去使用，其实这是一种缩写，和 margin 属性一样，它位置之分，分别是左上角、右上角、右下角以及左下角，仍然是个顺时针，不妨碍我们去记忆它。而 border-radius 是有 8 个值的，通过这后 4 个值，我们可以很容易的得到半圆，也就是熊猫耳朵的部分。

如此一来，熊猫整体我们都分析了一遍，接下来代码实操阶段。

脑袋 & 身体

脑袋和身体都是个椭圆，它们不是整体胜似整体，就一起说了。我们要注意的是，身体这个椭圆需要移除上边框，这样身体和脑袋的连接处不会那么生硬，同时，需要使用 rotate 属性将身体旋转一些角度，使得缺口和脑袋连接上。

// body 部分代码
.body {
  height: 96px;
  width: 130px;
  background-color: #fff;
  border-radius: 50%;
  margin-top: -24px;
  transform: rotate(-10deg);
  border-top-color: #fff;
}

四肢

四肢都是椭圆，椭圆的画法上面提到过了，我们需要的就是将四肢通过定位的方式，给 .body 设置为 relative 相对定位，然后四肢通过 absolute 绝对定位到指定位置，再通过 rotate 调整它们的角度，就大功告成啦。

耳朵

耳朵我用两个圆去模拟的，使用绝对定位，然后通过调整 z-index 属性将两个圆放置于 .head 下层、

眼睛 & 鼻子

眼睛是椭圆来模拟的，鼻子我通过绘制一个圆角矩形，给其添加伪元素 before 来做上半部分。

扇形的绘制可能有的小伙伴不懂，和我们矩形添加边框是一个道理，设置 border-top 的颜色不透明就可以了。

最后就是两个腮红了，也是两个圆，通过滤镜 filter: blur 来将它们模糊处理。

码上掘金