html+css3制作QQ图标
暑假已经过了10多天，闲来⽆事，在⽹上看到⼀个前辈⾯试时的⼀道题：⽤纯CSS3画出腾讯的企鹅图标。
本来以为会很繁琐，后来⾃⼰动⼿做的时候才发现并不是很困难。其实⽤到的知识主要就是特殊图形的绘制，即border-radius属性的应⽤。设置div的宽和⾼后，通过设置border-radius可以得到不同的图形效果：
1.width：500px; height：500px;border-radius:50%;(等效为border-radius:500px/500px;)
此时是得到的是圆形：
2.width:250px;height:125px;border-radius:50%;(等效为border-radius:250px/125px)
此时得到的是椭圆形：
3.width：250px;height:125px;border-radius:125px 125px 0 0 ;
此时得到半圆：
4.width:125px; height:250px;border-radius:0 125px 125px 0;
右半圆：
5. width:200px ;height:100px;border-radius:50px 30px 20px 10px;
此时的到的圆⾓按顺时针顺序：
6.如果是三个参数的情况：width:200px;height:100px;border-radius:10px 40px 30px;
此时得到的图形右上⾓和左下⾓相同：
好了，在了解了以上基础知识以后，就可以绘制出我们想要的图像了
成果如下：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ ICON</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="qq">
<div class="qq_head_eyeleft">
<div class="qq_head_eyeleft_cir">
<div class="qq_head_eyeleft_cirs"></div>  </div>
</div>
<div class="qq_head_eyeright">
<div class="qq_head_eyeright_cir"></div>  </div>
<div class="head"></div>
<div class="head_mouth"></div>
<div class="headmask">
<div class="mouth">
<div class="mouth_line"></div>
</div>
</div>
<div class="body"></div>
<div class="body_wei"></div>
<div class="body_wei_down"></div>
<div class="body_inner"></div>
<div class="left_hand"></div>
<div class="right_hand"></div>
<div class="left_foot">
<div class="left_foot_s"></div>
</div>
<div class="right_foot">
北京现代俱乐部
<div class="right_foot_s"></div>
</div>
</div>
</body>
</html>
css代码：
.qq{
height:545px;
left:10%;
position:absolute;
top:10%;
width:477px;
}
.head{
width:345px;
height:367px;
position:absolute;
left:72px;
border-radius:50%;
background-color:#19161a;
z-index:-999;
clip:rect(,);
}
}
.qq_head_eyeleft{
left:170px;
top:70px;
width:65px;
height:100px;
position:absolute;
border-radius:50%;
background-color:#fff;
z-index:99;
}
.qq_head_eyeleft_cir{
position: relative;
left: 40%;
width:30px;
height:40px;
background-color:#19161a;
border-radius:30px/40px;
bottom: -35px;
z-index:999;
}
.
qq_head_eyeleft_cirs{
position:relative;
width:15px;
height:20px;
background-color:#fff;
left:50%;
top:30%;
z-index:9999;
斯柯达柯迪亚克border-radius:50%;
}
.qq_head_eyeright{
display: inline-block;
left:250px;
top:70px;
width:65px;
height:100px;
position:absolute;
border-radius:50%;
background-color:#fff;
z-index:99;
}
.qq_head_eyeright_cir{
position:relative;
left:20%;
bottom:-35px;
width:15px;
height:20px;
border-radius:15px/20px;
border-color: #201e1f #201e1f rgba(255, 255, 255, 0); background-color:#fff;
border-style: solid;
border-width:8px;
z-index:999;
}
.
headmask{
width:230px;
height:70px;
position:absolute;思域改装
left:135px;
top:190px;
}
.mouth{
background-color:#fc9202;
width:230px;
height:70px;
border-radius:230px/70px;
z-index:99;
}
.mouth_line{
position:relative;
width:140px;
height:50px;
border-radius:50%;
border-width:7px;
left:45px;
top:15px;
/
*clip:rect(0px,130px,40px,0px);*/
border-bottom: 10px solid #201e1f;
}
.body{
position:absolute;
width:370px;
height:340px;
border-radius:50%;
background-color:#19161a;
left:13%;
top:200px;
z-index:-999;奇瑞qq3怎么样
}
.body_wei{
新胜达suv
width:380px;
height:150px;
border-radius:50%;
长城汽车图片z-index:-99;
position:absolute;
background-color:#fd2100;
top:200px;
left:56px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset; }
.head_mouth{
z-index:-9;
background-color:#19161a;
width:332px;
height:150px;
position:absolute;
border-radius:50%;
top:150px;
left:78px;
}
.
body_inner{
z-index:-101;
width:300px;
height:280px;
border-radius:50%;
background-color:#fff;
position:absolute;
left:97px;
top:250px;
}
.body_wei_down{
width:80px;
height:130px;
border-radius:200px 40px 50px 30px;
background-color:#fd2100;