iPhone 14 Pro 咱买不起，用 CSS 画一个总可以了吧

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

这个价格还是相当感人的

咱这辛苦的打工人，要写多少行代码才能买的起啊

外部轮廓

* {
  margin: 0;
  padding: 0;
}

.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  margin: 50px auto;
  position: relative;
}

.device .frame {
  z-index: 1;
}

.iphone {
  height: 650px;
  width: 342px;
}

.iphone .frame {
  background: #222;
  border-radius: 54px;
  height: 650px;
  padding: 22px;
  width: 342px;
}

外部边框

box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 4px #e2e3e4;

里面白色内容

.iphone .content {
  background-color: #fff;
  border-radius: 32px;
  height: 600px;
  position: relative;
  width: 300px;
}

.iphone .stripe::after,
.iphone .stripe::before {
  border: solid rgba(51, 51, 51, .25);
  border-width: 0 6px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.iphone .stripe::after {
  top: 68px;
}

.iphone .stripe::before {
  bottom: 68px;
}

按键

.iphone .btns {
  background: #606467;
  height: 26px;
  left: -2px;
  position: absolute;
  top: 92px;
  width: 3px;
}

.iphone .btns::after,
.iphone .btns::before {
  background: #606467;
  content: "";
  height: 50px;
  left: 0;
  position: absolute;
  width: 3px;
}

.iphone .btns::after {
  top: 48px;
}

.iphone .btns::before {
  top: 112px;
}

.iphone .power {
  background: #606467;
  height: 80px;
  position: absolute;
  right: -2px;
  top: 160px;
  width: 3px;
}

iPhone 14Pro 最大的卖点，就是灵动岛。我这个其实仿的不像，主要是那种玻璃质感没有出来。

.iphone .header {
  background: #222;
  height: 42px;
  left: 56%;
  margin-left: -82px;
  position: absolute;
  top: 27px;
  width: 133px;
  z-index: 199;
  border-radius: 30px;
}

.iphone .header::after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #222 75%, #222 100%);
  left: -6px;
}

.iphone .header::before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #222 75%, #222 100%);
  right: -6px;
}

里面的那颗摄像头

.iphone .sensors::after,
.iphone .sensors::before {
  content: "";
  position: absolute;
}

.iphone .sensors::before {
  background: #444;
  border-radius: 50%;
  height: 11px;
  left: 50%;
  margin-left: 39px;
  top: 15px;
  width: 11px;
  background: radial-gradient(circle at 70% 30%, #6b7bc3, #4c2290 10%, #5256a1, transparent);
  box-shadow: 0 0 2px #131420,
    0 0 2px #131420 inset,
    2px 0 4px #5256a1 inset;
}