輪播圖片是現代網站設計中非常流行的一個元素，它能夠吸引用戶的注意力，讓用戶更容易地了解網站中的關鍵信息。在編寫輪播圖片的CSS代碼時，可以使用以下樣式：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider {
position: relative;
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
width: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
flex: 0 0 100%;
width: 100%;
text-align: center;
position: relative;
}
.slide img {
max-width: 100%;
height: auto;
}
.slide:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.slider .prev,
.slider .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
padding: 10px;
font-size: 30px;
color: #f1f1f1;
transition: 0.3s;
}
.slider .prev:hover,
.slider .next:hover {
color: #fff;
}
.slider .prev {
left: 0;
}
.slider .next {
right: 0;
}
.dots {
position: absolute;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
margin: 0 5px;
background-color: #bbb;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.active {
background-color: #fff;
}

以上代碼中，.slider表示輪播圖容器的樣式，.slides表示存放輪播圖片的容器的樣式，.slide表示一個輪播圖片的樣式。其中，使用Flex布局實現圖片橫向排列，使用:before偽元素實現圖片上半透明的遮罩層，使用CSS3動畫實現輪播效果。同時，添加了左右箭頭和底部小圓點的控制功能，使用戶可以手動控制圖片滑動。