在CSS中，我們可以使用偽元素和樣式來創(chuàng)建一個三層的狀態(tài)欄，以下是一個基本的示例，展示了如何創(chuàng)建一個包含背景色、中間內容和底部邊框的三層狀態(tài)欄。

我們需要創(chuàng)建一個包含狀態(tài)欄的HTML元素：

<div class="status-bar">
  <div class="status-bar-inner">
    <div class="status-bar-content">
      <!-- 狀態(tài)欄內容 -->
    </div>
  </div>
</div>

我們使用CSS來樣式化這個狀態(tài)欄：

.status-bar {
  position: fixed; /* 固定狀態(tài)欄在屏幕上的位置 */
  top: 0; /* 狀態(tài)欄距離頂部的距離 */
  left: 0; /* 狀態(tài)欄距離左邊的距離 */
  right: 0; /* 狀態(tài)欄距離右邊的距離 */
  height: 50px; /* 狀態(tài)欄的高度 */
  background-color: #333; /* 狀態(tài)欄的背景色 */
}
.status-bar-inner {
  position: relative; /* 相對于.status-bar元素進行定位 */
  height: 100%; /* 高度占滿父元素 */
  background-color: #444; /* 內層的背景色 */
}
.status-bar-content {
  position: relative; /* 相對于.status-bar-inner元素進行定位 */
  padding: 10px; /* 內容區(qū)域的填充 */
  color: #fff; /* 內容的顏色 */
}

在這個示例中，我們使用了position屬性來控制每個元素的位置。status-bar元素被固定在屏幕的頂部，而status-bar-inner和status-bar-content元素則相對于它們的前輩進行定位，這種方法使得我們可以輕松地在狀態(tài)欄中添加內容和樣式，而不會受到其他元素的影響。