CSS3 組件是指利用 CSS3 技術實現的各種組件效果，它們可以讓網頁更加具有交互性和藝術感。

以下是一些常見的 CSS3 組件：

/* 按鈕組件 */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #2196F3;
color: white;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.button:hover {
background-color: #1976D2;
}
/* 圖片組件 */
.img-container {
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.img-container img {
width: 100%;
transition: all 0.3s;
transform: scale(1.1);
}
.img-container:hover img {
transform: scale(1);
}
/* 輪播圖組件 */
.carousel-container {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel {
width: 80%;
height: 80%;
position: relative;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;
}
.carousel-item.active {
opacity: 1;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.carousel-button.previous {
left: 20px;
}
.carousel-button.next {
right: 20px;
}

以上是一些常見的 CSS3 組件，它們可以讓網頁更加生動有趣，增加用戶的體驗。