一、
1、
然後將基本形狀作為值傳遞給屬性(如shape-outside屬性或clip-path屬性),這些屬性用於將形狀應用於元素以更改其周圍的內容流,或將元素剪切到分別定義形狀。
2、形狀的參考框
除了元素的高度和寬度之外,元素的框模型框:邊距框(margin -box),內容框(content-box),填滿框(padding-box)和邊框(border-box),也可用作參考來指定元素上的形狀範圍。參考框可以是四個框中的任何一個。
當把
二、基本形狀函數
以下為目前
1、inset()
語法:
inset( <shape-arg>{1,4} [round <border-radius>] )
說明:
inset()函數定義了一個插入矩形。
它需要1~4個偏移值,它們指向內部參考框邊緣(上,右,下與左邊界和頂點)的偏移量。這些指定了插入矩形在元素內的位置。
可選參數
2、circle()
circle( [<shape-radius>]? [at <position>]? )
circle()函數定義了一個插入圓
3、ellipse()
ellipse( [<shape-radius>{2}]? [at <position>]? )
ellipse()函數定義了一個橢圓;
4、polygon()
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
<shape-arg> = <length> | <percentage>
polygon()函數定義了一個多邊形
三、基本形狀說明
#基本形狀的計算值
基本形狀函數中的值是按指定計算,但有例外,如:
1、包含省略的值併計算其預設值。
2、一個
3、一
形狀的引用框被定義為將這些形狀作為值的屬性的一部分。
基本形狀的內插(形狀之間的動畫)
#對於在一個基本形狀和第二個基本形狀之間進行內插,將會套用下列規則。 shape函數中的值會以簡單列表插入。列表值在可能的情況下插入為長度,百分比或計算。如果清單值不是這些類型之一但是相同(例如nonzero在兩個清單中找到相同的清單位置),那麼這些值會進行內插。
1、兩種形狀必須使用相同的參考框。
2、如果兩個形狀都是相同的類型,那個類型是ellipse()或circle(),並且沒有一個半徑使用closest-side或farthest-side關鍵字,則在形狀函數中的每個值之間進行內插。
3、如果兩個形狀都是類型inset(),則在形狀函數中的每個值之間進行內插。
4、如果兩個形狀都是類型polygon(),則兩個多邊形具有相同數量的頂點,並且使用相同
5、在所有其他情況下,未指定插值。
四、瀏覽器相容性
#總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。
以上是