黑与白的融合，手把手带大家画一只大熊猫_用css3实现一个熊猫思路-CSDN博客

本文链接：https://blog.csdn.net/Android_boom/article/details/127299634

前言

熊猫是我国的国宝，同时也是我们表情包界的顶流，相信大家对这个熊猫头并不陌生吧，今天我将带领大家用 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;
}