劉海屏是一種手機屏幕設計，它在屏幕頂部留出一個小區域，用于放置前置攝像頭、聽筒等元素。在CSS中，我們可以使用一些技巧來實現劉海屏的效果。

/* 為body添加一個padding-top，使其與劉海距離相等 */
body {
padding-top: 30px; 
}
/* 利用偽元素:before來實現劉海效果 */
.header::before {
content: "";
display: block;
background: #FFF;
height: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
/* 將劉海元素置于頂部 */
.header {
position: relative;
z-index: 20;
}

在上面的代碼中，我們首先為body元素添加了一個padding-top，使其與劉海的高度相等。接著，利用偽元素:before來實現劉海的樣式，將其置于屏幕頂部，并設置z-index為10。最后，將頭部元素的z-index設置為20，確保其在劉海之上。

通過這樣的方式，我們可以輕松實現劉海屏的樣式效果，為我們的網頁或應用程序增添更多的細節和美感。