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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

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

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

circle()函數(shù)的語法如下：

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

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

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

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

除了使用長度值和百分比值來指定圓形的半徑，也可以使用兩個(gè)關(guān)鍵字來指定：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);

推薦學(xué)習(xí)：html視頻教程