在html中，circle的意思是圓，用于指定某種基本圖形類型，只需要給元素設(shè)置“circle(數(shù)值)”即可。這個(gè)函數(shù)創(chuàng)建一個(gè)圓形區(qū)域來(lái)屏蔽它所應(yīng)用的元素，可以指定它的半徑和位置，通常與圖像一起使用來(lái)創(chuàng)建圓角形狀。
CSS circle()函數(shù)是一個(gè)圖形函數(shù)，用于指定某種基本圖形<basic-shape>類型。
CSS <basic-shape>代表一種基本圖形，它通過(guò)圖形函數(shù)來(lái)定義一個(gè)圖形。一個(gè)基本圖形可以作為shape-outside屬性，或clip-path屬性的參數(shù)使用，經(jīng)這些屬性應(yīng)用在一個(gè)元素上，可以使這個(gè)元素周圍的內(nèi)容環(huán)繞在它的周圍，或者使用指定的圖形來(lái)剪裁內(nèi)容。
circle()函數(shù)的語(yǔ)法如下：
circle() = circle( [<shape-radius>]? [at <position>]? ) /* where.. */ <shape-radius> = <length> | <percentage> | closest-side | farthest-side
circle()函數(shù)用于定義一個(gè)圓形。它的參數(shù)都是可選參數(shù)，如果第一個(gè)參數(shù)缺省，則由瀏覽器來(lái)決定它的默認(rèn)值。
如果第二個(gè)參數(shù)position缺省，那么圓形的圓心位于使用該函數(shù)的元素的中心位置。設(shè)置position參數(shù)的語(yǔ)法和background-position相同。使用position是必須帶有at關(guān)鍵字。
<shape-radius>參數(shù)用于指定圓形的半徑。如果是百分比值則使用參考盒模型的寬度和高度來(lái)計(jì)算。不允許為負(fù)數(shù)。
除了使用長(zhǎng)度值和百分比值來(lái)指定圓形的半徑，也可以使用兩個(gè)關(guān)鍵字來(lái)指定：closest-side和furthest-side。closest-side關(guān)鍵字表示，如果你沒有指定圓形的半徑，那么瀏覽器將使用元素的最接近圓心的邊到圓心的距離作為半徑。如下圖所示。furthest-side和closest-side剛好相反，它使用距離最遠(yuǎn)的邊到圓心的距離作為半徑。
下面都是有效的circle()函數(shù)聲明。
circle(); /* 使用默認(rèn)值：圓形使用closest-side作為半徑，圓形位于元素的中心 */ circle(100px at 30% 50%); /* 圓形的半徑為100像素，位于元素的水平30%，垂直50%的位置 */ circle(farthest-side at 25% 25%); /* 圓形的半徑為最遠(yuǎn)邊的一半，位于元素的水平25%，垂直25%的地方 */ circle(10em at 500px 300px);
