是什麼？有什麼用？

是什麼？有什麼用？這篇文章跟大家介紹在css中是什麼，作用有哪些，讓大家了解的使用。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

一、的基本介紹

1、是什麼？

是一種表現基礎圖形的CSS資料型別，作用於clip-path 與 shape-outside 屬性。 【相關影片教學推薦：css3教學】

資料類型可以由基本形狀函數指定，即可以使用基本形狀函數來定義基本形狀，請參閱下面的“基本形狀函數”部分，列出可能的形狀函數值及其簡單描述。

然後將基本形狀作為值傳遞給屬性（如shape-outside屬性或clip-path屬性），這些屬性用於將形狀應用於元素以更改其周圍的內容流，或將元素剪切到分別定義形狀。

2、形狀的參考框

除了元素的高度和寬度之外，元素的框模型框：邊距框（margin -box），內容框（content-box），填滿框（padding-box）和邊框（border-box），也可用作參考來指定元素上的形狀範圍。參考框可以是四個框中的任何一個。

當把用於定義形狀時，引用框由使用值（基本形狀函數）的每個屬性定義（請參閱下面的範例部分）。基本形狀的座標系的原點位於參考框的左上角，x軸向右移動，y軸向下延伸。以百分比表示的所有長度均從參考盒的使用尺寸中解析出來（百分比定義的長度將透過相關盒模型與使用的維度重定義）。如果未指定參考框，則邊框將用作clip-path屬性的參考框，並且邊框用於屬性中使用的形狀shape-outside。

二、基本形狀函數

以下為目前所支援的圖形。所有值都由函數表達式定義，並且遵循 屬性值定義語法（value definition syntax）。

1、inset()

語法：

inset( <shape-arg>{1,4} [round <border-radius>] )

說明：

inset()函數定義了一個插入矩形。

它需要1~4個偏移值，它們指向內部參考框邊緣（上，右，下與左邊界和頂點)的偏移量。這些指定了插入矩形在元素內的位置。

可選參數用來定義插進長方形頂點的圓弧角度。

2、circle()

circle( [<shape-radius>]? [at <position>]? )

circle()函數定義了一個插入圓

參數代表了r， 即圓形的半徑， 不接受負數作為該參數的值。

 參數定義了圓心的位置。省缺值為盒模型的中心。

3、ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

ellipse()函數定義了一個橢圓；

參數可以有兩個值，分別為了​​rx 與ry，其中rx 代表了x軸方向的半徑， ry代表了y軸方向的半徑；此參數不接受負數值。

參數定義了橢圓形圓心的位子。其省缺值為盒子模型的中心。

4、polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<shape-arg> = <length> | <percentage>

polygon()函數定義了一個多邊形

 代表了填色規則（ filling rule ），即，如何填滿該多邊形。 可選值為 nonzero 和 evenodd。此參數的省缺值為 nonzero。

三、基本形狀說明

#基本形狀的計算值

基本形狀函數中的值是按指定計算，但有例外，如：

1、包含省略的值併計算其預設值。

2、一個值circle()或ellipse()計算為左上角原點的一對偏移（水平然後垂直），每個偏移作為絕對長度和百分比的組合給出。

3、一中值inset()計算為所有八個的擴充列表或百分比值。

形狀的引用框被定義為將這些形狀作為值的屬性的一部分。

基本形狀的內插（形狀之間的動畫）

對於在一個基本形狀和第二個基本形狀之間進行內插，將會套用下列規則。 shape函數中的值會以簡單列表插入。列表值在可能的情況下插入為長度，百分比或計算。如果清單值不是這些類型之一但是相同（例如nonzero在兩個清單中找到相同的清單位置），那麼這些值會進行內插。

1、兩種形狀必須使用相同的參考框。

2、如果兩個形狀都是相同的類型，那個類型是ellipse()或circle()，並且沒有一個半徑使用closest-side或farthest-side關鍵字，則在形狀函數中的每個值之間進行內插。

3、如果兩個形狀都是類型inset()，則在形狀函數中的每個值之間進行內插。

4、如果兩個形狀都是類型polygon()，則兩個多邊形具有相同數量的頂點，並且使用相同的形狀函數中的每個值之間進行內插。

5、在所有其他情況下，未指定插值。

四、瀏覽器相容性

#總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

以上是是什麼？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！