iPhone设计图

来源：互联网发布：手机淘宝历史版本下载编辑：程序博客网时间：2024/05/16 23:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>6S</title>    <style type="text/css">        body{            background: #cccccc;        }        #phone{            /*子绝父相 */            position: relative;            width: 320px;            height: 580px;            background: black;            /*居中 上下0,左右自动*/            margin: 50px auto 0px;            border: #3b3b3b solid 10px;            border-radius: 40px;            /*阴影效果*/            box-shadow: 3px 5px 5px 1px rgba(0,0,0,0.5);        }        #phone:after{            content: '';            width: 6px;            display: block;            height: 50px;            background: #2e2e2e;            /*子绝父相 */            position: absolute;            left: -16px;            top: 60px;            border-radius: 5px 0px 0px 5px ;        }        #phone:before{            content: '';            width: 50px;            height: 6px;            display: block;            background: #2e2e2e;            position: absolute;            right: 36px;            top: -16px;            border-radius: 5px 5px 0px 0px ;        }        #camera{            width: 6px;            height: 6px;            background-color: #1a1a1a;            border:#4a4a4a solid 3px;            border-radius: 50%;            margin: 20px auto 0px;        }        #headphone{            width: 60px;            height: 5px;;            background-color: #1a1a1a;            border: #4a4a4a solid 4px;            margin: 16px auto 0px;            border-radius: 10px;            box-shadow: 1px 2px 2px  rgba(0,0,0,0.5);        }        #screen{            width:290px;            height: 430px;            background-color: #0a0a0a;            margin: 20px auto 0px;            border: #1a1a1a solid 4px;        }        #btn{            width: 40px;            height: 40px;            background-color: #1a1a1a;            margin: 10px auto 0px;            border-radius: 50%;            border: lightgrey solid 2px;            /*position: relative;*/            /*阴影效果*/            box-shadow: 2px 2px 2px  rgba(0,0,0,0.5) inset;            /*减掉超出界面部分 阻止边界传导*/            overflow: hidden;        }        /*#btn:before{*/            /*content: '';*/            /*width: 20px;*/            /*height: 20px;*/            /*border: #FFFFFF solid 2px;*/            /*display: block;*/            /*margin: 9px auto;*/            /*border-radius: 5px;*/            /*/!*position: absolute;*!/*/        /*}*/        #screen text{            color: white;            display: block;            /*background: red;*/            text-align: center;            height: 60px;            line-height: 60px;            margin: 180px auto 0px;            font-size: 30px;        }    </style></head><body>    <div id="phone">        <div id="camera"></div>        <div id="headphone"></div>        <div id="screen">            <text>iPhone7S</text>        </div>        <div id="btn"></div>    </div></body></html>
阅读全文
0 0