CSS制作安卓机器人

<p>安卓机器人</p>
<style><!--
        /*整体*/

        .robot{
            width:400px;
            height:500px;
            margin:0px auto;
        }
        /*头部*/
        .robot .head{
            content:" ";
            width:200px;
            height:80px;
            margin:0px auto;
            background-Color:green;
            border-radius:90px 90px 0px 0px;
        }
        /*眼睛*/
        .robot .head::before{
            content:" ";
            width:16px;
            height:16px;
            display:block;
            background:white;
            border-radius:8px;
            transform:translate(46px,40px);
        }

        .robot .head::after{
                    content:" ";
                    width:16px;
                    height:16px;
                    display:block;
                    background:white;
                    border-radius:8px;
                    transform:translate(129px, 23px)
                }

        /*身体*/
        .robot .main{
            content:" ";
            width:200px;
            height:180px;
            margin:10px auto;
            background-Color:green;
            border-radius:0px 0px 22px 22px;
        }

        /*手*/
        .robot .main::before{
            content:" ";
            width:35px;
            height:120px;
            display:block;
            background:green;
            border-radius:18px;
            transform:translate(-50px, 9px);
        }

        .robot .main::after{
            content:" ";
            width:35px;
            height:120px;
            display:block;
            background:green;
            border-radius:18px;
            transform:translate(216px, -111px);
        }

        /*脚*/
        .robot .foot{
            content:" ";
            width:200px;
            height:180px;
            margin:-10px auto;
        }
        .robot .foot::before{
            content:" ";
            width:50px;
            height:70px;
            display:block;
            background:green;
            border-radius:0px 0px 30px 30px;
            transform:translate(33px, 0px);
        }

        .robot .foot::after{
            content:" ";
            width:50px;
            height:70px;
            display:block;
            background:green;
            border-radius:0px 0px 30px 30px;
            transform:translate(115px, -71px);
        }
/*
    重点：
        行内元素需要通过display属性设置为block才能设置长宽。
        通过border-radius属性设置圆角;
        格式：border-radius:左上角 右上角 右下角 左下角
        通过transform属性设置偏移量
        格式：transform:translate(偏移量, 偏移量);
*/

--></style>
<div class="robot">&nbsp;</div>

效果图在线看：http://bbqwifi.info/homework/201611/android.html