前几天看到一篇文章是写用css3绘制腾讯企鹅的。趁着今天有空，就用css3来写一个百度的小度熊。话不多说，开始上码。
爆照
先来一张呆萌小度熊的成果照。
在绘制小度熊之前，首先要对小度熊布局上进行一个分解，便于我们组织代码结构。 从整体结构上主要分成耳朵，头部和身体。我们统一对将胳膊，肚子和腿都放到了身体的部分里。
<!-- 页面框架 -->
<!Doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<title>纯css度熊</title>
<link rel="stylesheet" href="./bear.css"/>
</head>
<body>
<!-- 背景 -->
<div class="bac">
<!-- 头部 -->
<!-- 耳朵 -->
<div class="earLeft"></div>
<div class="earRight"></div>
<!-- 脸 -->
<div class="head"></div>
<!-- 身体 -->
<div class="body">
<!-- 胳膊 -->
<div class="armLeft"></div>
<div class="armRight"></div>
<!-- 肚子 -->
<div class="tummy"></div>
<!-- 腿 -->
<div class="legLeft"></div>
<div class="legRight"></div>
</div>
<!-- 阴影 -->
<div class="shaodw"></div>
</div>
</body>结构调整好之后，我们先把背景容器的位置和大小设置一下。在开发的时候，可以先给背景设置一个深色背景，便于我们看各部分的位置，最后的时候注释掉就可以了。
/*背景容器*/
.bac {
width: 345px;
height: 500px;
top: 50%;
position: relative;
left: 50%;
transform: translate(-50%,-50%);
/* background-color: #333333; */
}头部
然后我们就可以在容器中，放置各个部分了，我是按从上到下的顺序写的，所以最开始放置的是头部。
/*头部*/
.bac .head {
width: 346px;
height: 288px;
/* background-color: #e1b79b; */
border: 3px solid #a57662;
border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
position: relative;
z-index: 88;
}知识点来了，怎么样可以画出这种不规则的形状呢？绘制这种带有弧线的形状，可以使用border-radius属性，具体使用方法这里不深入讨论，简单来说通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。因为我没有准确的尺寸图，所以就用百分比来实现了。
