在網(wǎng)頁(yè)設(shè)計(jì)中，常常需要將多個(gè)圖片放在一個(gè)圓周上，以便更好地呈現(xiàn)出視覺(jué)效果。今天我們就來(lái)學(xué)習(xí)一下如何使用css實(shí)現(xiàn)這一效果。

.circle { 
position: relative; 
width: 300px; 
height: 300px; 
margin: 50px auto; 
border-radius: 50%; 
background: #f2f2f2; 
} 
.circle img { 
position: absolute; 
left: 50%; 
top: 50%; 
width: 80px; 
height: 80px; 
margin-left: -40px; 
margin-top: -40px; 
border-radius: 50%; 
} 
.circle img:nth-of-type(1) { 
transform: rotate(0deg) translateY(-125px) rotate(0deg); 
} 
.circle img:nth-of-type(2) { 
transform: rotate(72deg) translateY(-125px) rotate(-72deg); 
} 
.circle img:nth-of-type(3) { 
transform: rotate(144deg) translateY(-125px) rotate(-144deg); 
} 
.circle img:nth-of-type(4) { 
transform: rotate(216deg) translateY(-125px) rotate(-216deg); 
} 
.circle img:nth-of-type(5) { 
transform: rotate(288deg) translateY(-125px) rotate(-288deg); 
}

在上面的代碼中，我們首先創(chuàng)建了一個(gè)class為“circle”的div，用來(lái)包裹圖片。然后給定了div的樣式，包括寬度、高度、位置、圓角、背景等。接著，我們?yōu)槊恳粋€(gè)圖片的樣式創(chuàng)建了一個(gè)類(lèi)名，即.circle img。這些樣式包括了位置、大小、圓角等。最后，在圓周上排列這些圖片，我們使用了偽類(lèi)選擇器：nth-of-type(n)來(lái)對(duì)圖片進(jìn)行旋轉(zhuǎn)和平移。

引入以上的代碼后，我們只需要加入五張圖片即可實(shí)現(xiàn)在一個(gè)圓周上布局的效果。如下：

排列效果如下圖所示：

如此，我們就成功地將五個(gè)圖片放在了一個(gè)圓周上。通過(guò)調(diào)整樣式，我們還可以對(duì)圓周上的圖片進(jìn)行更加豐富的排列效果。