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

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

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

1、inset()--矩形

2、circle()--圓

3、ellipse()--橢圓

4、polygon()--多邊形

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

inset()

語法：

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

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

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

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

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

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

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

inset(10% 20% round 5px);

創建非圓形嵌入矩形，向內設置距離頂部15px，左右20px，距離下邊緣30px的參考框

inset(15px 20px 30px);

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

inset(25% round 10px 30px);

一個10px圓角的矩形，向內設置距離頂部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()函數用于定義圓。問號表明兩個參數都是可選的，可以省略。如果省略一個，則瀏覽器將該參數設置為其默認值。

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

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

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

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

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

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

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

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

注意：

1、closest-side：

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

2、farthest-side：

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

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

使用默認值：

ellipse();

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

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

定義一個橢圓，其x半徑是長度的一半；最長的一側，y半徑是長度的一半；較短的一側，位于元素坐標系上的坐標分別為：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()函數用于使用任意數量的點定義更復雜的任意形狀。

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

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

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

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

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, ...);

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

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

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

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

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

示例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()函數的隨機多邊形形狀。

html代碼：

<div class="container">
  <p>未指定參考框，因此默認情況下設置邊框。</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>基本形狀函數是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!