CSS3画图3-手机模型_html/css_WEB-ITnose

无标题文档


body{
background-color:#CCC;}
#phone{
width:250px;
height:500px;
background-color:#2e2e2e;
margin:60px auto;
border:#3b3b3b solid 10px;
border-radius:50px;
box-shadow:3px 5px 5px 1px rgba(0,0,0,0.5);
position:relative;
}
#phone:before{
content:'';
width:50px;
height:6px;
background-color:#2e2e2e;
display:block;
position:absolute;
top:-16px;
left:150px;
border-radius:3px 3px 0px 0px;}
#phone:after{
content:'';
width:6px;
height:50px;
background-color:#2e2e2e;
display:block;
position:absolute;
left:-16px;
top:60px;
border-radius:3px 3px 0px 0px;}
#camera{
width:6px;
height:6px;
border:#4a4a4a solid 3px;
margin:20px auto 0px;
border-radius:50%;
box-shadow:1px 2px 2px rgba(0,0,0,0.5);}
#headphone{
width:60px;
height:5px;
border:#4a4a4a solid 4px;
margin:13px auto;
border-radius:10px;
box-shadow:1px 2px 2px rgba(0,0,0,0.5);
}
#screen{
width:220px;
height:360px;
margin:15px auto 0px;
background-color:#0a0a0a;
border:#1a1a1a solid 4px;}
#btn{
width:40px;
height:40px;
background-color:#1a1a1a;
margin:8px auto 0px;
border-radius:50px;
box-shadow:2px 2px 2px rgba(0,0,0,0.5) inset;
overflow:hidden; /*阻止边界的传导*/}
#btn:before{
content:'';
width:20px;
height:20px;
border:#fff solid 2px;
display:block;
margin:9px auto;
border-radius:5px;
}

查看更多关于CSS3画图3-手机模型_html/css_WEB-ITnose的详细内容...