无标题文档 <br /> body{ <br /> background-color:#CCC;} <br /> #phone{ <br /> width:250px; <br /> height:500px; <br /> background-color:#2e2e2e; <br /> margin:60px auto; <br /> border:#3b3b3b solid 10px; <br /> border-radius:50px; <br /> box-shadow:3px 5px 5px 1px rgba(0,0,0,0.5); <br /> position:relative; <br /> } <br /> #phone:before{ <br /> content:''; <br /> width:50px; <br /> height:6px; <br /> background-color:#2e2e2e; <br /> display:block; <br /> position:absolute; <br /> top:-16px; <br /> left:150px; <br /> border-radius:3px 3px 0px 0px;} <br /> #phone:after{ <br /> content:''; <br /> width:6px; <br /> height:50px; <br /> background-color:#2e2e2e; <br /> display:block; <br /> position:absolute; <br /> left:-16px; <br /> top:60px; <br /> border-radius:3px 3px 0px 0px;} <br /> #camera{ <br /> width:6px; <br /> height:6px; <br /> border:#4a4a4a solid 3px; <br /> margin:20px auto 0px; <br /> border-radius:50%; <br /> box-shadow:1px 2px 2px rgba(0,0,0,0.5);} <br /> #headphone{ <br /> width:60px; <br /> height:5px; <br /> border:#4a4a4a solid 4px; <br /> margin:13px auto; <br /> border-radius:10px; <br /> box-shadow:1px 2px 2px rgba(0,0,0,0.5); <br /> } <br /> #screen{ <br /> width:220px; <br /> height:360px; <br /> margin:15px auto 0px; <br /> background-color:#0a0a0a; <br /> border:#1a1a1a solid 4px;} <br /> #btn{ <br /> width:40px; <br /> height:40px; <br /> background-color:#1a1a1a; <br /> margin:8px auto 0px; <br /> border-radius:50px; <br /> box-shadow:2px 2px 2px rgba(0,0,0,0.5) inset; <br /> overflow:hidden; /*阻止边界的传导*/} <br /> #btn:before{ <br /> content:''; <br /> width:20px; <br /> height:20px; <br /> border:#fff solid 2px; <br /> display:block; <br /> margin:9px auto; <br /> border-radius:5px; <br /> } <br /> 版权声明:博主原创文章,转载请说明出处。http://blog.csdn.net/dzy21