CSS3中有許多實(shí)用的屬性，其中比較常用的一個(gè)是border-radius，可以用來(lái)制作圓角效果。而使用border-radius屬性可以制作圓形，則需要將圖片的寬度和高度設(shè)為相等，并且使用border-radius: 50%;的寫(xiě)法來(lái)實(shí)現(xiàn)。

img{
width: 200px;
height: 200px;
border-radius: 50%;
}

不過(guò)，上述方法只能實(shí)現(xiàn)普通的圓形效果，而有時(shí)我們可能需要制作橢圓、半圓、扇形等特殊形狀的圓。這時(shí)，我們可以使用clip-path屬性。clip-path指定一個(gè)剪切路徑，元素的內(nèi)容只會(huì)顯示在該路徑內(nèi)部，外部?jī)?nèi)容將被裁剪掉。

以下是制作橢圓、半圓、扇形的代碼示例：

/*橢圓*/
img{
width: 200px;
height: 150px;
clip-path: ellipse(50% 50% at 50% 50%);
}
/*兩個(gè)半圓組成的圓*/
img{
width: 200px;
height: 200px;
clip-path: polygon(
50% 0%, 100% 50%,
50% 100%, 0% 50%);
}
/*扇形*/
img{
width: 250px;
height: 250px;
clip-path: polygon(
50% 0%, 100% 0%,
100% 50%, 100% 100%,
50% 100%, 0% 100%,
0% 50%);
}

使用clip-path屬性可以實(shí)現(xiàn)不同形狀的圓，使頁(yè)面效果更加豐富多彩。