css 中<basic-shape>基本形狀函數(shù)是什么

這篇文章主要介紹了css 中<basic-shape>基本形狀函數(shù)是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

首先我們要知道在css <basic-shape>中所支持的基本形狀函數(shù)有四個，分別為：

1、inset()--矩形

2、circle()--圓

3、ellipse()--橢圓

4、polygon()--多邊形

下面我們來詳細了解一下這四種基本形狀函數(shù)，看看它們是如何使用的。

inset()

語法：

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

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

它們遵循邊際速記（簡寫）語法，所以給予一個、兩個、或四個值都能設(shè)置四個偏移量。如果指定了一個偏移值（例如15px），則它將用作頂部，右側(cè)，底部和左側(cè)偏移。如果指定了兩個偏移值（例如20px 10px），則它們分別指定頂部和底部偏移以及右和右偏移。如果指定了三個值（例如10px 15px 20px），則第一個指定頂部偏移，第二個指定右和左偏移，第三個指定底部偏移。如果指定了四個值，則第一個用作頂部偏移，第二個用作右偏移，第三個用作底部偏移，第四個用作左偏移。

就像邊距一樣，偏移值可以設(shè)置為絕對長度或百分比。

可選參數(shù)<border-radius>用于定義插進長方形頂點的圓弧角度，該參數(shù)使用與css border-radius屬性相同的語法來指定1~8個值，這些值指定水平和垂直維度中的四個角的舍入值。指定的邊框半徑必須以round關(guān)鍵字開頭。它同樣遵循邊際速記語法，給予一個、兩個、或四個值都能設(shè)置四個偏移量。

以下是所有有效的inset()矩形形狀聲明：

一個5px圓角的矩形，其邊緣從頂部和底部邊緣向內(nèi)設(shè)置10％，左邊和右邊20％的盒子參考框

inset(10% 20% round 5px);

創(chuàng)建非圓形嵌入矩形，向內(nèi)設(shè)置距離頂部15px，左右20px，距離下邊緣30px的參考框

inset(15px 20px 30px);

在所有四個中創(chuàng)建一個向內(nèi)設(shè)置25％的矩形相對于參考框邊緣的方向， 并且左上角和右下角都是圓形的 10px，以及右上角和左下角 舍入30px

inset(25% round 10px 30px);

一個10px圓角的矩形，向內(nèi)設(shè)置距離頂部10px，距離左部40px，距離右部20px，距離下邊緣30px的參考框

inset(10px 20px 30px 40px round 10px);

circle（）

語法：

circle() = circle( [<shape-radius>]? [at <position>]? )
/ *其中.. * /
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

circle()函數(shù)用于定義圓。問號表明兩個參數(shù)都是可選的，可以省略。如果省略一個，則瀏覽器將該參數(shù)設(shè)置為其默認值。

如果省略position參數(shù)，則圓的中心將位于其使用的元素的中心。你可以使用與background-position屬性語法相同的語法指定位置。該position參數(shù)前面是單詞at。

shape-radius參數(shù)指定圓的半徑。它可以設(shè)置為絕對長度或百分比。此處的百分比值是從參考框的使用寬度和高度中解析出來的。不允許使用負值。

除了使用長度和百分比指定圓的半徑外，還可以使用以下兩個關(guān)鍵字之一來設(shè)置：closest-side或furthest-side。closest-side是默認值，這意味著，如果省略此參數(shù)并且未指定圓的半徑，則瀏覽器將使用從元素中心到任何維度中最近邊的長度作為半徑的長度。farthest-side使用從中心到最遠側(cè)的長度。

下圖說明了在視覺上的半徑值closest-side和farthest-side半徑值的對比：

以下是所有有效的circle()形狀聲明：

使用默認值：最近側(cè)半徑的圓，位于元素的中心

circle();

半徑為100px的圓，水平位于30％，垂直50％*

circle(100px at 30% 50%);

定義半徑為長度的一半的圓。最長的一邊，位于元素坐標系上的坐標25% 25%

circle(farthest-side at 25% 25%);

定義一個圓心，其中心位于500px，水平和垂直300px，半徑為 10em

circle(10em at 500px 300px);

ellipse（）

語法：

ellipse（）= ellipse（[ < shape-radius > {2}]？[at < position > ]？）
/ *其中.. * /
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

ellipse()函數(shù)定義橢圓形狀。它采用與circle()函數(shù)相同的參數(shù)列表和值，除了不是采用一個形狀半徑值，而是采用兩個半徑rx和ry，它們按順序表示橢圓的x軸和y軸半徑。此外，此處的百分比值是根據(jù)參考框的使用寬度（對于rx值）和使用的高度（對于ry值）來解析的。

有關(guān)circle()可能的參數(shù)，其含義和可能的值的更多信息，請參閱上面的circle()函數(shù)說明。

注意：

1、closest-side：

對于圓，這是任何維度中最近的一側(cè)。對于橢圓，這是半徑尺寸中最接近的一側(cè)。

2、farthest-side：

對于圓，這是任何尺寸中最遠的一面。對于橢圓，這是半徑尺寸中最遠的一側(cè)。

以下是所有有效的ellipse()形狀聲明：

使用默認值：

ellipse();

橢圓x半徑100px和y半徑50px，水平放置30％，垂直放置50％

ellipse(100px 50px at 30% 50%);

定義一個橢圓，其x半徑是長度的一半；最長的一側(cè)，y半徑是長度的一半；較短的一側(cè)，位于元素坐標系上的坐標分別為：25% 25%

ellipse(farthest-side closest-side at 25% 25%);

定義一個橢圓，其中心位于500px；水平、垂直、x和y都為300 px，半徑為10em（這基本上是一個圓圈）

ellipse(10em 10em at 500px 300px);

polygon（）

語法：

polygon（）= polygon（[ < fill-rule >，]？[ < shape-arg >  < shape-arg > ]＃）
/ *其中.. * /
<shape-arg> = <length> | <percentage>

polygon()函數(shù)用于使用任意數(shù)量的點定義更復(fù)雜的任意形狀。

該函數(shù)接受一組坐標對（<shape-arg> <shape-arg>），每對指定一個點的位置。第一個參數(shù)表示點的x位置，第二個參數(shù)表示y位置。這組點構(gòu)成了形狀。瀏覽器將列表中的最后一個頂點與列表中的第一個頂點連接以關(guān)閉多邊形，因此你不必自己執(zhí)行此操作。

坐標對以逗號分隔，可以使用絕對長度或百分比進行設(shè)置。

除了坐標對的集合外，該polygon()函數(shù)還可以使用一個名為the的可選參數(shù)fill-rule。這指定了如何處理多邊形內(nèi)部可能與自身相交的區(qū)域。有關(guān)fill-rule詳細信息，請參閱SVG中的屬性 可能的值是nonzero或evenodd。省略時的默認值是nonzero。

以下是所有有效的polygon()函數(shù)聲明：

polygon(0 0, 100% 100%, 0 100%);

polygon(0 0, 100% 100%, 0 100%);

polygon(50px 0px, 100px 100px, 0px 100px);

polygon(170.67px 291.00px, 126.23px 347.56px, 139.79px 417.11px, 208.92px 466.22px, 302.50px 482.97px, 343.67px 474.47px, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, 336.50px 235.26px, 299.67px 196.53px, 259.33px 209.53px, 217.00px 254.76px);

polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);

接下面了我們看看使用基本形狀函數(shù)定義基本形狀的示例和實例：

示例1：指定參考框，定義一個圓

.element {  
   shape-outside：circle（100px at 50％50％）margin-box;
}

使用shape-outside屬性定義用于更改元素浮動區(qū)域形狀的形狀。注意如何在屬性聲明中定義形狀的引用框。

上面代碼的結(jié)果看起來類似于下圖：

示例2：定義了與clip-path屬性一起使用的多邊形形狀，以將元素剪切為定義的形狀：

.element {     
    clip-path：polygon（26px 111px，222px 386px，311px 281px，470px 393px，660px 293px，604px 47px，505px 107px，318px 37px，42px 107px）;
}

實例：使用clip-path屬性將元素剪切為定義為屬性值的形狀。定義的形狀是使用該polygon()函數(shù)的隨機多邊形形狀。

html代碼：

<div class="container">
  <p>未指定參考框，因此默認情況下設(shè)置邊框。</p>
  <div class="element"></div>
</div>

css代碼：

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  width: 100%;
  height: 0;
  padding-top: 75%;
  background: url(http://tympanus.net/codrops-playground/assets/images/cssref/datatypes/basic-shape/spring.jpg);
  background-size: 100% 100%;
  border: 1px solid grey;
  -moz-clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
  -webkit-clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
  clip-path: polygon(13% 35%, 25% 18%, 44% 36%, 68% 24%, 97% 51%, 72% 68%, 41% 80%, 11% 65%);
}

效果圖：

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