最近學(xué)習(xí)了css技術(shù)，嘗試用css畫(huà)了一張?zhí)O果手機(jī)的圖。下面是圖片和具體的代碼介紹。

.iphone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
height: 650px;
background: linear-gradient(180deg, #f2f2f2 0%, #a6a6a6 100%);
border-radius: 50px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.screen {
position: relative;
width: 310px;
height: 580px;
margin: 30px;
background: #000;
border-radius: 20px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.camera {
position: absolute;
top: 45px;
left: 50%;
transform: translate(-50%);
width: 40px;
height: 40px;
background: #f2f2f2;
border-radius: 50%;
}
.home-button {
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%);
background: linear-gradient(180deg, #e6e6e6 0%, #b3b3b3 100%);
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.home-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
}

這個(gè)蘋(píng)果手機(jī)的div使用了圓角作為邊框，用了漸變色來(lái)實(shí)現(xiàn)手機(jī)背景。手機(jī)的顯示屏使用黑色，坐標(biāo)為相對(duì)位置在手機(jī)div之中。手機(jī)頂部的攝像頭使用圓形div來(lái)表示，中央的home按鈕同理。用css畫(huà)蘋(píng)果手機(jī)是實(shí)踐了css與html技術(shù)，是css進(jìn)階學(xué)習(xí)過(guò)程中的一個(gè)很好的實(shí)例。