CSS3でiPhoneを描く

まずは完成イメージをご覧ください、お先にどうぞ。(これは決して画像ではありません。うん～、なんか変な言い方ですね～)

iPhoneの何世代目か聞かないでください、私も知らないし、使ったこともないので、お察しください。

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*设置div元素的圆角边框*/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*距离上边距10px 左右居中*/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /*当宽高相同时，则为圆*/ margin:10px auto; }

/*:before 选择器在被选元素的内容前面插入内容。*/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /*即使插入的内容为空也需要写，否则不显示*/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML部分

後で少し機能を追加しました

ホームボタンをクリックすると携帯の画面が点灯し、5秒後に再び画面が消えます

画面点灯状態の完成イメージ、もちろん、中央のものは画像です（私の携帯です）

ボタン部分のdivにonclickイベントをバインドし、以下の関数を呼び出します。

var btn_obj = document.getElementById(“screen”); function btn(){ btn_obj.style.background = “url(1.jpg)”; btn_obj.style.backgroundSize = “225px 385px”; setTimeout(“black()",5000); }

function black(){ btn_obj.style.background = “none”; btn_obj.style.backgroundColor = “#0A0A0A”; }