影片《机器人总动员》是2008年一部由安德鲁·斯坦顿编导的科幻动画电影。这部动画片自上映以来风靡全球，片中的主角-小机器人Eva更是成为卡通明星。现在我们就要用CSS3技术来绘制这位开通明星。
Eva的html结构非常简单：我们使用一个相对定位的div来包含一些绝对定位的div元素，用它们来“组装”Eva。所有的绝对定位的div（除了Eva的身体）都使用单独的空div来制作。手臂和身体之间使用了嵌套div结构，手臂嵌套在body div中，这样，移动身体也会移动它的手臂。头部和眼镜部分也是类似的结构。
<div id="eve-container">
<div id="eve-body">
<div id="eve-neck"></div>
<div id="eve-leftarm" class="arm"></div>
<div id="eve-rightarm" class="arm"></div>
</div>
<div id="eve-head">
<div id="eve-faceplate">
<div class="eye" id="eve-lefteye"></div>
<div class="eye" id="eve-righteye"></div>
</div>
</div>
<div id="eve-shadow"></div>
</div>
在div.eve-container中有一个不属于Eva身体的div-它的影子eve-shadow。当我们通过css的box-shadow来对它进行渲染后，你将会看到在Eva下方的一个漂亮的阴影。
下面是制作Eva的CSS代码，注意代码中没有使用浏览器厂商的前缀。
div#eve-container { position: relative; width: 200px; height: 600px; margin: 0 auto; }
div#eve-container div { position: absolute; }
div#eve-head {
height: 145px; width: 180px;
border-top-left-radius: 90px 85px;
border-top-right-radius: 90px 85px;
border-bottom-left-radius: 90px 60px;
border-bottom-right-radius: 90px 60px;
background-color: #fff; border: 1px solid #999;
}
div#eve-faceplate {
background-color: #000;
width: 150px;
height: 95px;
bottom: 8px;
margin: 0 15px;
border-top-left-radius: 75px 60px;
border-top-right-radius: 75px 60px;
border-bottom-left-radius: 75px 35px;
border-bottom-right-radius: 75px 35px; }
div.eye { width: 45px; height: 25px;
background-color: #00a; bottom: 25px;
border-top-left-radius: 22px 12px;
border-top-right-radius: 22px 12px;
border-bottom-left-radius: 22px 13px;
border-bottom-right-radius: 22px 13px;
background: radial-gradient(#5798ce 0%, #000 100%);
}
div#eve-lefteye { margin-left: 15px; transform: rotate(10deg); }
div#eve-righteye { margin-left: 85px; transform: rotate(-10deg); }
div#eve-body {
width: 180px;
height: 220px;
top: 152px;
border-bottom-left-radius: 90px 220px;
border-bottom-right-radius: 90px 220px;
border: 1px solid #999; border-top: none;
background: radial-gradient(40px 0, #fff, #fff 70%, #000);
}
div#eve-neck {
width: 180px; height: 60px;
background-color: #fff; top: -30px;
border-radius: 50%; border: 1px solid #999;
background: radial-gradient(90px 65px, #fff, #fff 55%, #888);
}
div.arm {
width: 40px;
height: 180px;
background: #fff; border: 1px solid #999;
}
div#eve-leftarm {
left: -45px;
border-top-left-radius: 30px 50px;
border-top-right-radius: 10px 40px;
border-bottom-left-radius: 30px 130px;
border-bottom-right-radius: 10px 140px;
transform: rotate(10deg);
}
div#eve-rightarm {
left: 180px;
border-top-right-radius: 30px 50px;
border-top-left-radius: 10px 40px;
border-bottom-right-radius: 30px 130px;
border-bottom-left-radius: 10px 140px;
transform: rotate(-10deg);
}
div#eve-shadow {
width: 180px;
height: 60px;
top: 300px;
border-radius: 50%;
box-shadow: 0px 100px 30px rgba(0, 0, 0, 0.3);
}
在CSS代码中，我们主要使用border-radius属性来制作Eva的轮廓。注意border-radius属性的两个值的设置：一个是垂直方向的弯曲程度，一个是水平方向的弯曲程度。如果是半圆形，就简单的只给一个值。
最后，Eva的手臂和眼睛通过 CSS3 rotate给一些轴向倾斜。到这里，小Eva就做好了，是不是很有意思呢？但是如果你想将它放到其它页面上，需要重新调整CSS代码，因为它没有响应式效果。这也是缺点之一。我们打算在下一个版本中使用SVG来制作它，这样一次制作，到处可用！
