CSS3画图3-手机模型

时间：2015-07-20 21:38:21 阅读：135 评论：0 收藏：0 [点我收藏+]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
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;
}
</style>
<body>
<div id="phone">
<div id="camera"></div>
<div id="headphone"></div>
<div id="screen"></div>
<div id="btn"></div>
</div>
</body>

</html>

技术分享

CSS3画图3-手机模型

标签：javaweb

原文地址：http://blog.csdn.net/dzy21/article/details/46973697

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行