仿 iPhone X 刘海屏效果

效果演示

实现原理

通过在顶部居中放置一个黑色圆角矩形（即“刘海”），模拟 iPhone X 的屏幕缺口。适用于移动端网页或展示类项目。

核心代码示例

<div class="notch"></div>



<style>

.notch {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 180px;

  height: 30px;

  background: black;

  border-bottom-left-radius: 20px;

  border-bottom-right-radius: 20px;

}

</style>