在網頁設計中，CSS 照明效果可以為頁面增添趣味性和視覺效果。下面讓我們來學習如何通過 CSS 來實現燈光照射的效果。

/* 創建一個燈光效果的元素 */
.box{
position: relative;
width: 200px;
height: 200px;
background: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8)/*燈光顏色*/,
inset 0 0 20px rgba(0, 0, 0, 0.4)/*邊框顏色*/;
z-index: 1;
}
/* 為燈光效果創建一個覆蓋層 */
.box::before{
content: "";
position: absolute;
top: -100px;
left: -100px;
right: -100px;
bottom: -100px;
background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 70%);
transform: skewY(-10deg);
z-index: -1;
}

在代碼中，我們創建了一個 class 名稱為 .box 的元素，并為其添加了盒子陰影效果（box-shadow）。通過 inset 參數控制邊框顏色，以及 rgba（red、green、blue、alpha）函數控制燈光顏色。

接下來我們為燈光效果創建一個覆蓋層，該覆蓋層使用了偽元素 ::before。我們使用了一個線性漸變函數 linear-gradient，指定從頁面頂部到底部的漸變方式，并設置了其中兩個顏色值。將漸變方向設置為 to bottom，代表從上到下。

通過 skewY 函數實現向 Y 軸斜切變換。最后，我們將該偽元素的 z-index 屬性設置為 -1，使其處于 .box 元素之后。

這樣就實現了一個簡單的燈光照射效果，可以讓網頁內容多了一份生動和個性。