CSS3之安卓小头像制作
背景
我们在生活中可以常常看到安卓的小头像，现在我们可以用CSS3来制作一个安卓标志。
知识点
对border-radius的使用
详细代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color:#ccc;
opacity: 0.6;
}
.items{
width: 500px;
height: 600px;
background-color: white;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.tou{
width: 220px;
height: 100px;
background-color: lawngreen;
margin: 20px auto 5px;
border-top-left-radius: 90px 100px;
border-top-right-radius: 90px 100px;
position: relative;
}
.tou div{
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
border: 1px solid #ccc;
position: absolute;
}
.tou .eye1{
left: 50px;
top: 50px;
}
.tou .eye2{
left: 140px;
top: 50px;
}
.body{
width: 220px;
height: 200px;
background-color: lawngreen;
margin: 0px auto;
}
.arms .arm1{
width: 50px;
height: 150px;
background-color: lawngreen;
position: absolute;
left: 82px;
top: 162px;
border-radius: 25px;
}
.usually{
width: 50px;
height: 150px;
background-color: lawngreen;
position: absolute;
border-radius: 25px;
}
.arms .arm2{
right: 82px;
top: 162px;
}
.foot .foot1{
right: 165px;
bottom: 160px;
}
.foot .foot2{
right: 280px;
bottom: 160px;
}
</style>
</head>
<body>
<div class="items">
<div class="tou">
<div class="eye1"></div>
<div class="eye2"></div>
</div>
<div class="body"></div>
<div class="arms">
<div class="arm1 usually"></div>
<div class="arm2 usually"></div>
</div>
<div class="foot">
<div class="foot1 usually"></div>
<div class="foot2 usually"></div>
</div>
</div>
</body>
</html>
