在html中，circle的意思是圓，用于指定某種基本圖形類型，只需要給元素設置“circle(數值)”即可。這個函數創建一個圓形區域來屏蔽它所應用的元素，可以指定它的半徑和位置，通常與圖像一起使用來創建圓角形狀。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS circle()函數是一個圖形函數，用于指定某種基本圖形<basic-shape>類型。

CSS <basic-shape>代表一種基本圖形，它通過圖形函數來定義一個圖形。一個基本圖形可以作為shape-outside屬性，或clip-path屬性的參數使用，經這些屬性應用在一個元素上，可以使這個元素周圍的內容環繞在它的周圍，或者使用指定的圖形來剪裁內容。

circle()函數的語法如下：

circle() = circle( [<shape-radius>]? [at <position>]? ) /* where.. */ <shape-radius> = <length> | <percentage> | closest-side | farthest-side

circle()函數用于定義一個圓形。它的參數都是可選參數，如果第一個參數缺省，則由瀏覽器來決定它的默認值。

如果第二個參數position缺省，那么圓形的圓心位于使用該函數的元素的中心位置。設置position參數的語法和background-position相同。使用position是必須帶有at關鍵字。

<shape-radius>參數用于指定圓形的半徑。如果是百分比值則使用參考盒模型的寬度和高度來計算。不允許為負數。

除了使用長度值和百分比值來指定圓形的半徑，也可以使用兩個關鍵字來指定：closest-side和furthest-side。closest-side關鍵字表示，如果你沒有指定圓形的半徑，那么瀏覽器將使用元素的最接近圓心的邊到圓心的距離作為半徑。如下圖所示。furthest-side和closest-side剛好相反，它使用距離最遠的邊到圓心的距離作為半徑。

下面都是有效的circle()函數聲明。

circle(); /* 使用默認值：圓形使用closest-side作為半徑，圓形位于元素的中心 */   circle(100px at 30% 50%); /* 圓形的半徑為100像素，位于元素的水平30%，垂直50%的位置 */   circle(farthest-side at 25% 25%); /* 圓形的半徑為最遠邊的一半，位于元素的水平25%，垂直25%的地方 */   circle(10em at 500px 300px);

推薦學習：html視頻教程