html中<basic-shape>是什么

這篇文章主要介紹html中<basic-shape>是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　一、<basic-shape>的基本介紹

　　1、<basic-shape>是什么？

　　<basic-shape>是一種表現基礎圖形的CSS數據類型，作用于clip-path與shape-outside屬性中。【相關視頻教程推薦：css3教程】

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

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

　　2、形狀的參考框

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

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

　　二、基本形狀函數

　　以下為當前<basic-shape>所支持的圖形。所有<basic-shape>值都由函數表達式定義，并且遵循屬性值定義語法（valuedefinitionsyntax）。

　　1、inset()

　　語法：

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

　　說明：

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

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

　　可選參數<border-radius>用于定義插進長方形頂點的圓弧角度。

　　2、circle()

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

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

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

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

　　3、ellipse()

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

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

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

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

　　4、polygon()

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

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

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

　　<fill-rule>代表了填充規則（fillingrule），即，如何填充該多邊形。可選值為nonzero和evenodd。該參數的省缺值為nonzero。

　　三、基本形狀說明

　　基本形狀的計算值

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

　　1、包含省略的值并計算其默認值。

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

　　3、一<border-radius>中值inset()計算為所有八個的擴展列表<length>或百分比值。

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

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

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

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

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

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

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

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

以上是“html中<basic-shape>是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！