CSS，即層疊樣式表，是一種用于網頁排版的語言。它可以用來控制一個網頁中元素的樣式和布局。在CSS3發布之后，又陸續有了CSS的新版本，其中包括CSS Level 4。這個新版本包含了很多新的特性和屬性，下面將對CSS Level 4的四種主要功能進行介紹。

1. 光柵布局(Grid Layout)
CSS Level 4中新增了一個名為光柵布局(Grid Layout)的屬性。這個屬性將網頁布局轉化為類似于表格的結構，方便地對元素進行定位。光柵布局的結構非常靈活，可以靈活地調整元素的大小和位置。

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.item {
background-color: #999;
text-align: center;
padding: 20px;
font-size: 30px;
}

2. 變量和計算
在CSS Level 4中，變量和計算也成為了一種重要的功能。通過使用變量，我們可以輕松地管理CSS中的顏色，大小和其他屬性，從而更加方便地對網頁進行調整。

:root {
--color-primary: blue;
--color-secondary: red;
}
.container {
background-color: var(--color-primary);
color: var(--color-secondary);
}
.item {
width: calc(100% - 30px);
height: calc(100% - 30px);
}

3. 濾鏡
濾鏡是在CSS3中引入的功能，但在CSS Level 4中，它得到了更進一步的發展。利用濾鏡，我們可以改變圖像和顏色的屬性，從而實現更多的效果。

.container {
filter: grayscale(50%);
}
.item:hover {
filter: brightness(2);
}

4. 變形(Transform)
變形是CSS Level 4中的另一個重要功能。變形可以通過旋轉，縮放，平移和操縱等操作來改變網頁元素的形狀和位置。

.item {
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

以上是CSS Level 4中的四種主要功能，這些新特性拓展了CSS在網頁開發中的功能，使得網頁可以呈現更加豐富的效果，為網頁設計師和開發人員提供了更多的選擇。