CSS是一種層疊樣式表語言，用于定義網頁的樣式和布局。其中圖片輪播也是網頁中常見的效果，下面我們通過pre標簽來展示css圖片輪放的代碼。

<div class="slider">
<input type="radio" name="slider" id="slide1" checked/>
<input type="radio" name="slider" id="slide2" />
<input type="radio" name="slider" id="slide3" />
<ul>
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
/*基本樣式*/
.slider{
position:relative;
}
.slider input{
display:none;
}
.slider label{
display:inline-block;
width:10px;
height:10px;
margin-right:5px;
background-color:#ccc;
cursor:pointer;
}
.slider label:hover{
background-color:#555;
}
.slider input:checked ~ ul li{
opacity:0;
transition:opacity 0.5s;
}
/*特效*/
.slider input#slide1:checked ~ ul li:nth-child(1),
.slider input#slide2:checked ~ ul li:nth-child(2),
.slider input#slide3:checked ~ ul li:nth-child(3){
opacity:1;
transition:opacity 1s;
}

代碼中首先定義了一個div容器，包含了三個radio控件、一個ul列表、三個label標簽。通過radio的選中狀態控制li元素的透明度實現圖片的輪放切換。基本樣式包括底部標簽樣式和選中狀態改變的動畫效果，而特效部分則定義了對應的圖片選中狀態。通過這樣的方式，我們可以滿足網頁中圖片輪播的需要。