CSS是前端開發里面非常重要的一部分，是設計頁面樣式的核心之一。雖然有很多基礎技巧，但是掌握一些高級CSS技巧可以讓你的網頁更加出色。以下是12個CSS高級技巧：

1. 偽類選擇器

/* 鼠標移入鏈接時改變顏色 */
a:hover {
color: red;
}

2. 盒模型

/* 盒子有了指定的寬和高，不再隨著內容自適應 */
.box {
box-sizing: border-box;
width: 200px;
height: 100px;
}

3. 居中方式

/* 水平居中 */
.parent {
display: flex;
justify-content: center;
}
/* 垂直居中 */
.parent {
display: flex;
align-items: center;
}

4. 漸變顏色

/* 背景色漸變 */
background: linear-gradient(to right, red, yellow, green);

5. 倒影效果

/* 文字倒影 */
.text {
-webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

6. 多行省略號

/* 多行省略號 */
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}

7. 縮放動畫

/* 圖片縮放 */
.image:hover {
transform: scale(1.2);
transition: all 0.3s ease-in-out;
}

8. 透明度動畫

/* 透明度變化 */
.box:hover {
opacity: 0.5;
transition: all 0.3s ease-in-out;
}

9. 懸停效果

/* 懸停效果 */
.item {
transform: translateZ(0);
transition: transform 0.25s ease-out;
}
.item:hover, .item:focus, .item:active {
transform: scale(1.1);
}

10. 滾動動畫

/* 滾動動畫 */
.scroll {
scroll-behavior: smooth;
}

11. 自定義滾動條

/* 自定義滾動條 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 50px;
}

12. 徑向漸變

/* 徑向漸變 */
.background {
background-image: radial-gradient(circle at center, red, yellow, green);
}

這些高級CSS技巧可以幫助你更加靈活地設計你的頁面，讓你的頁面更加出彩。歡迎嘗試！