css3中<basic-shape>如何使用

這篇文章主要介紹了css3中<basic-shape>如何使用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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

1、<basic-shape>是什么？

<basic-shape>是一種表現(xiàn)基礎圖形的CSS數(shù)據(jù)類型，作用于clip-path 與 shape-outside 屬性中。

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

然后將基本形狀作為值傳遞給屬性（如shape-outside屬性或clip-path屬性），這些屬性用于將形狀應用于元素以更改其周圍的內(nèi)容流，或?qū)⒃丶羟械椒謩e定義形狀。

2、形狀的參考框

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

當把<basic-shape>用于定義形狀時，引用框由使用<basic-shape>值（基本形狀函數(shù)）的每個屬性定義（請參閱下面的示例部分）?；拘螤畹淖鴺讼档脑c位于參考框的左上角，x軸向右移動，y軸向下延伸。以百分比表示的所有長度均從參考盒的使用尺寸中解析出來（百分比定義的長度將通過相關盒模型與使用的維度重定義）。如果未指定引用框，則邊框?qū)⒂米鱟lip-path屬性的引用框，并且邊框用于屬性中使用的形狀shape-outside。

二、基本形狀函數(shù)

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

1、inset()

語法：

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

說明：

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

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

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

2、circle()

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

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

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

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

3、ellipse()

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

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

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

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

4、polygon()

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

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

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

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

三、基本形狀說明

基本形狀的計算值

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

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

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

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

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

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

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

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

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

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

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

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

四、瀏覽器兼容性

感謝你能夠認真閱讀完這篇文章，希望小編分享css3中<basic-shape>如何使用內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!