本文目錄導(dǎo)讀：

1. 使用border-radius屬性
2. 使用mask屬性
3. 使用clip-path屬性

如何用CSS繪制圓形圖片

CSS是一種強(qiáng)大的樣式表語(yǔ)言，可以用來(lái)控制網(wǎng)頁(yè)的外觀和格式，繪制圓形圖片是CSS中的一個(gè)常見(jiàn)應(yīng)用，下面，我們將詳細(xì)介紹如何用CSS繪制圓形圖片。

使用border-radius屬性

CSS中的border-radius屬性可以用來(lái)設(shè)置元素的圓角半徑，包括圓形圖片，我們可以將圖片的border-radius設(shè)置為50%，使其成為一個(gè)圓形。

img {
  border-radius: 50%;
}

使用mask屬性

CSS中的mask屬性可以用來(lái)創(chuàng)建一個(gè)遮罩層，將圖片中的某些部分隱藏起來(lái)，我們可以利用mask屬性來(lái)繪制圓形圖片。

img {
  mask: url(#circle-mask);
}

#circle-mask是一個(gè)指向圓形遮罩層的引用，在遮罩層中，我們可以使用白色表示需要顯示的部分，使用黑色表示需要隱藏的部分。

<mask id="circle-mask">
  <rect x="0" y="0" width="200" height="200" fill="white" />
  <circle cx="100" cy="100" r="100" fill="black" />
</mask>

使用clip-path屬性

CSS中的clip-path屬性可以用來(lái)定義一個(gè)裁剪區(qū)域，只顯示區(qū)域內(nèi)的部分，我們可以利用clip-path屬性來(lái)繪制圓形圖片。

img {
  clip-path: circle(50%);
}

circle(50%)表示裁剪區(qū)域?yàn)橐粋€(gè)半徑為50%的圓形。