隨著網頁設計的不斷發展和技術的不斷進步，CSS也不斷推出新的特性。下面我們介紹五個比較新的CSS特性。

CSS Grid

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}
.grid-item {
background-color: #dff0d8;
padding: 10px;
text-align: center;
}

CSS Grid是現代網頁構建中進行布局的全新方式。它可以用于構建復雜的多列、多行的布局。通過設置網格容器，我們可以創建一個網格，并指定行和列使用的數量和大小。這種方式非常靈活，可以允許我們根據需要調整布局。

Flexbox

.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item {
background-color: #fcf8e3;
padding: 10px;
text-align: center;
}

Flexbox是用于網頁布局的新方式。它允許您沿一個方向布置項目（行或列）和控制項之間的間距。Flex容器可以是水平或垂直的，支持響應式設計。

CSS變量

:root {
--main-color: #007bff;
}
.text-color {
color: var(--main-color);
}

CSS變量是可重用的東西，您可以在整個應用程序中使用它們，而無需多次定義顏色或字體。變量是使用--開頭的自定義屬性定義的，并可以在任何選擇器中引用。這種方式很方便，因為您可以輕松地更改值而無需更新每個單獨的選擇器。

陽影

.box {
box-shadow: 5px 5px 5px #888888;
}

陰影是指在元素周圍添加的陰影效果。CSS的box-shadow屬性允許您設置陰影的長度、角度、顏色和模糊度。這種方式讓網頁設計更加立體化，增加了可讀性。

動畫

@keyframes animate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.animated {
animation: animate 2s infinite;
}

使用CSS，可以輕松地實現動畫效果。使用@keyframes定義動畫的關鍵幀。在動畫中，您可以指定元素從什么位置到什么位置能達到動畫效果。然后，使用animation屬性將定義的動畫添加到元素上。