首頁 > web前端 > css教學 > 主體

是什麼?有什麼用?

青灯夜游
發布: 2018-11-12 15:52:02
原創
3183 人瀏覽過

是什麼?有什麼用?這篇文章跟大家介紹在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、在所有其他情況下,未指定插值。

四、瀏覽器相容性

<basic-shape>是什麼?有什麼用?

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!