iPhone 12 页面卷动逐行滑入效果，前端面试必问

打开 CodePen 编辑器，在 HTML 的部份加入标题。由于它有一个副标题，所以我会用 <p>标签去装着它。然后加入一个 <div>，id 名为 iphone，里面新增两个 <div>，id 分别是 hardware 和 ui；hardware 会用来显示 iPhone 的机身和边框，而 ui 则会显示画面里面的内容。

CSS 的部分

---

先定义一些 CSS，让我们更加清楚知道在做什么。加入 :root 选择器，定义一些变量和样式：

• --device-width 是 770px

• --device-height 是 1336px

• --ui-width 是 640px

• 基础文字大小是 15px

然后加入 #iphone 选择器，设定 position 是 relative，宽度和高度的值从变量中获取。

再加入 #hardware 选择器，设定宽度和高度是 100%，然后背景图片，载入 iPhone 的机身图片，为了支援 Retina Display 高清屏幕，这张图片的尺寸是两倍大小，所以设定 background-size，宽度和高度同样等于变量的设定值。

好了，在这里想介绍一个图片遮罩的 CSS 属性，大家会发现现在 iPhone 的四周，圆型边框背后有个黑色背景：