CSS天空盒是一種非常有趣的技術，它可以讓我們在網頁上呈現出栩栩如生的天空效果。通過設置不同的背景圖片，我們可以輕松地實現白天、夜晚、日落等多種天氣狀況下的場景。下面我們就來學習如何使用CSS天空盒。

.sky {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url('sky.jpg') no-repeat center center;
background-size: cover;
}

以上就是CSS天空盒的基本代碼。我們首先定義了一個類名為“sky”的元素，并設置其寬高為100%，并且在頁面的左上角固定位置。然后在其背景圖片的URL中引入了一個名為“sky.jpg”的圖片，這將是我們天空盒的背景圖片。這里我們將背景圖設置為不平鋪（no-repeat），并居中（center）顯示。最后通過background-size屬性將背景圖完美地縮放到瀏覽器窗口的大小。

除了常規的天空盒效果外，我們還可以使用CSS3中的漸變效果，為我們天空盒添加更加華麗的場景效果。下面是使用漸變效果的CSS天空盒的代碼。

.sky {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(to bottom, #0066ff 0%, #6699ff 50%, #d1e0ff 100%);
}

在上述代碼中，我們使用了CSS3中的linear-gradient漸變效果，將藍色的背景色漸變為淡藍色，再漸變為白色。在這里，我們使用了to bottom（垂直向下）方向的漸變效果，確保天空盒的漸變效果與地平線對齊。

通過簡單的代碼設置，我們可以輕松地為網頁添加天空盒效果，并根據不同場景選擇不同的背景圖片和漸變色調。讓我們開始在美妙的天空下舞蹈吧！