圖片輪播已經成為現代UI設計中不可或缺的部分。通過使用CSS樣式，可以快速實現美觀的圖片輪播功能。下面介紹一些常用的CSS樣式。

/* 輪播圖容器 */
.container {
position: relative;
width: 100%;
height: 500px;
}
/* 圖片容器 */
.slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 單張圖片 */
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
/* 當前顯示的圖片 */
.current-slide {
opacity: 1;
}
/* 按鈕容器 */
.slide-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
/* 左右箭頭 */
.slide-nav button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 28px;
color: #fff;
margin: 0 10px;
}
/* 圖片指示器 */
.slide-indicators {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
/* 單個指示器 */
.slide-indicator {
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 10px;
background-color: #fff;
cursor: pointer;
}
/* 當前圖片指示器 */
.slide-indicator.active {
background-color: #333;
}

以上是常用的圖片輪播CSS樣式，可以根據具體的設計需求做相應調整。