CSS（Cascading Style Sheets）是一種用于網頁設計的標記語言，它能夠控制網頁的外觀和結構，并且也是網頁制作中必不可少的一環。在這里，我們收集了一些CSS效果大全，供大家參考。

/* 1. 文字陰影效果 */
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
/* 2. 邊框動畫效果 */
.border-animation {
border: 2px solid #FF4D4D;
transition: border-width 0.2s ease-in-out;
}
.border-animation:hover {
border-width: 6px;
}
/* 3. 圖片濾鏡效果 */
.image-filter:hover {
filter: grayscale(100%);
}
/* 4. 3D旋轉效果 */
.rotate-3d {
transform: rotate3d(1, 1, 0, 45deg);
}
/* 5. 按鈕動畫效果 */
.button-animation {
background-color: #FF4D4D;
transition: background-color 0.2s ease-in-out;
}
.button-animation:hover {
background-color: #FFA07A;
}
/* 6. 彈性動畫效果 */
.bounce-animation {
animation: bounce 1s infinite;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
}
/* 7. 漸變背景效果 */
.gradient-background {
background: linear-gradient(45deg, #FF4D4D, #FFA07A);
}
/* 8. 模糊背景效果 */
.blur-background {
background: url('image.jpg');
filter: blur(5px);
}
/* 9. 動態陰影效果 */
.dynamic-shadow {
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
transition: box-shadow 0.2s ease-in-out;
}
.dynamic-shadow:hover {
box-shadow: 8px 8px 16px rgba(0,0,0,0.5);
}
/* 10. 扭曲效果 */
.twist-effect {
transform: skewX(-30deg);
}

通過使用這10種CSS效果，您可以在網頁設計中添加更多的互動和視覺效果，使用戶的瀏覽體驗更加豐富和有趣。