CSS圖片輪播可以通過CSS實現滑動、淡入淡出等交互效果，使網站更具活力，提升用戶體驗。而純白風格是時下設計趨勢之一，簡潔、清爽，讓網站更具現代感。下面是一個純白風格的CSS圖片輪播的代碼示例。

html, body {
height: 100%;
}
.slider-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.slider-container input[type=radio] {
display: none;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider input[type=radio]:checked + .slider-item img {
opacity: 1;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 999;
font-size: 24px;
color: #fff;
cursor: pointer;
}
.slider-prev {
left: 20px;
}
.slider-next {
right: 20px;
}
.slider-pagination {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.slider-pagination label {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
}
.slider-pagination input[type=radio]:checked + label {
background-color: #000;
}

代碼中，預設了輪播容器的寬高為100%，使用position:relative和overflow:hidden修飾。輪播項用input和label實現，使用radio類型的input，每個input對應一個圖片，因此可以通過checked屬性的變化來控制當前顯示哪一張圖片。輪播圖片使用opacity和transition實現淡入淡出效果。輪播按鈕和分頁器使用絕對定位，居中顯示。其中分頁器使用偽類實現了點選中與未選中狀態的樣式變化。通過CSS提升輪播組件的可讀性，使用純白風格使界面簡潔美觀。