CSS3是一種用于網頁設計的語言，它為開發者提供了各種強大的樣式選項，使網頁設計更加有趣且富有創意。在這里，我們將介紹一些常見的CSS3練習圖，幫助你提高自己的設計技能。

/* 圓形 */
.circle {
width: 100px;
height: 100px;
background-color: #00bcd4;
border-radius: 50%;
}
/* 漸變背景 */
.gradient {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #00bcd4, #2196f3);
}
/* 陰影效果 */
.shadow {
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
/* 翻轉效果 */
.flip {
width: 200px;
height: 200px;
background-color: #00bcd4;
perspective: 1000px;
}
.flip:hover {
transform: rotateY(180deg);
}
/* 動畫效果 */
.animation {
width: 100px;
height: 100px;
background-color: #00bcd4;
animation: myanimation 2s ease-in-out infinite alternate;
}
@keyframes myanimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50px);
}
}

這些CSS3練習圖可以使用在各種不同的網頁設計中，為你的網站添加一些有趣的效果。掌握這些技巧可以使你的網站更加吸引人，提高網站的用戶體驗。