CSS制作安卓机器人 _安卓

赋料扬雄敌，诗看子建亲。这篇文章主要讲述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>

【CSS制作安卓机器人】效果图在线看：http://bbqwifi.info/homework/201611/android.html