1. Web
  2. CSS
  3. <basic-shape>

<basic-shape>

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

* 此特性的某些部分可能存在不同級別的支援。

<basic-shape> CSS 資料型別表示在 clip-path、shape-outside 和 offset-path 屬性中使用的形狀。

試一試

clip-path: inset(22% 12% 15px 35px);

clip-path: circle(6rem at 12rem 8rem);

clip-path: ellipse(115px 55px at 50% 40%);

clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

clip-path: path("M 50,245 A 160,160 0,0,1 360,120 z");

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

語法

<basic-shape> 資料型別用於建立基本形狀，包括透過容器內邊距、座標距離或指定尺寸建立的矩形，以及圓形、橢圓、多邊形、路徑和作者建立的形狀。這些基本形狀是使用一個 <basic_shape> CSS 函式定義的，每個值都需要一個遵循形狀函式特定語法的引數。

通用引數

一些基本形狀函式的語法中通用的引數包括：

round <'border-radius'>

為透過容器內邊距建立的矩形、透過距離建立的矩形和帶尺寸的矩形定義圓角，其語法與 CSS border-radius 簡寫屬性相同。

<shape-radius>

定義圓形或橢圓的半徑。有效值包括 <length>、<percentage>、closest-side（預設值）和 farthest-side。負值無效。

關鍵字值 closest-side 使用從形狀中心到參考盒最近邊的長度來建立半徑長度。關鍵字值 farthest-side 使用從形狀中心到參考盒最遠邊的長度。

<position>

定義圓形或橢圓的中心<position>。如果省略，則預設為 center。

<fill-rule>

設定 fill-rule，用於確定如何填充由基本形狀多邊形、路徑和形狀定義的形狀內部。可能的值為 nonzero（預設值）和 evenodd。

備註：offset-path 不支援 <fill-rule>，使用它會使該屬性無效。

矩形語法：<basic-shape-rect>

<basic-shape-rect> 型別是 <basic-shape> 型別的子集，表示僅限於建立矩形的基本形狀函式，包括 inset()、rect() 和 xywh()。

polygon()、path() 和 shape() 函式也可用於建立矩形，但它們不限於僅建立四邊直角形狀。

透過容器內邊距建立矩形的語法

inset() 函式建立一個內嵌矩形，其大小由其容器四邊的偏移距離定義，並可選地設定圓角。

inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

當提供前四個引數時，它們分別表示從參考盒向內定義的上、右、下、左偏移量，用於確定內嵌矩形邊緣的位置。這些引數遵循 margin 簡寫屬性的語法，允許你用一個、兩個、三個或四個值設定所有四個內邊距。

如果某個維度的兩個內邊距之和超過該維度的 100%，則兩個值都會按比例減小，使其總和等於 100%。例如，值 inset(90% 10% 60% 10%) 的上內邊距為 90%，下內邊距為 60%。這些值會按比例減小為 inset(60% 10% 40% 10%)。像這樣不包含任何區域且沒有 shape-margin 的形狀，不會影響文字環繞。

透過距離建立矩形的語法

rect() 函式使用距參考盒上邊緣和左邊緣的指定距離來定義一個矩形，並可選地設定圓角。

rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

使用 rect() 函式時，你不需要定義矩形的寬度和高度。相反，你指定四個值來建立矩形，其尺寸由參考盒的大小和四個偏移值決定。每個值可以是 <length>、<percentage> 或關鍵字 auto。關鍵字 auto 對於上和左值被解釋為 0%，對於下和右值被解釋為 100%。

帶尺寸的矩形語法

xywh() 函式定義一個矩形，其位置由距參考盒左邊緣（x）和上邊緣（y）的指定距離確定，其大小由指定的矩形寬度（w）和高度（h）確定（按此順序），並可選地設定圓角。

xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )

圓形語法

circle() 函式使用一個半徑和一個位置來定義一個圓形。

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

<shape-radius> 引數表示圓的半徑，定義為 <length> 或 <percentage>。此處的百分比值是根據參考盒的已用寬度和高度解析的，計算公式為 sqrt(width^2+height^2)/sqrt(2)。如果省略，半徑將由 closest-side 定義。

橢圓語法

ellipse() 函式使用兩個半徑和一個位置來定義一個橢圓。

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

<shape-radius> 引數分別表示橢圓的 x 軸半徑 rx 和 y 軸半徑 ry。這些值指定為 <length> 或 <percentage>。此處的百分比值是相對於參考盒的已用寬度（對於 rx 值）和已用高度（對於 ry 值）進行解析的。如果只提供一個半徑值，ellipse() 形狀函式將無效。如果沒有提供值，則使用 50% 50%。

多邊形語法

polygon() 函式使用 SVG fill-rule 和一組座標來定義一個多邊形。

polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )

該函式接受一個由逗號分隔的座標對列表，每個座標對由兩個以空格分隔的 <length-percentage> 值組成，作為 xi 和 yi 對。這些值表示多邊形在位置 i 的 x 和 y 軸座標（即兩條線相交的頂點）。

路徑語法

path() 函式使用 SVG fill-rule 和 SVG 路徑定義來定義一個形狀。

path( <'fill-rule'>? , <string> )

必需的 <string> 是一個用引號括起來的 SVG 路徑字串。path() 函式不是一個有效的 shape-outside 屬性值。

形狀語法

shape() 函式使用一個初始起點和一系列形狀命令來定義一個形狀。

shape( <'fill-rule'>? from <coordinate-pair> , <shape-command># )

from <coordinate-pair> 引數表示第一個形狀命令的起點，<shape-command> 定義一個或多個形狀命令，這些命令類似於 SVG 路徑命令。shape() 函式不是一個有效的 shape-outside 屬性值。

描述

建立形狀時，參考盒由使用 <basic-shape> 值的屬性定義。預設情況下，形狀的座標系原點位於元素外邊距盒（margin box）的左上角，x 軸向右延伸，y 軸向下延伸。所有以百分比表示的長度都是根據參考盒的尺寸解析的。

預設的參考盒是 margin-box，如下圖所示。該圖顯示了使用 shape-outside: circle(50%) 建立的圓形，並高亮顯示了在瀏覽器開發者工具中看到的盒模型的不同部分。此處的形狀是相對於外邊距盒定義的。

An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.

基本形狀的計算值

<basic-shape> 函式中的值按指定計算，並有以下額外考慮：

  • 對於任何省略的值，將使用其預設值。
  • circle() 或 ellipse() 中的 <position> 值被計算為距參考盒左上角的一對偏移量：第一個是水平偏移，第二個是垂直偏移。每個偏移量都指定為 <length-percentage> 值。
  • inset() 中的 <border-radius> 值會展開為一個包含八個值的列表，每個值都是 <length> 或 <percentage>。
  • inset()、rect() 和 xywh() 函式會計算為等效的 inset() 函式。

基本形狀的插值

在兩個 <basic-shape> 函式之間進行動畫時，將遵循下面列出的插值規則。每個 <basic-shape> 函式的引數值形成一個列表。要在兩個形狀之間進行插值，兩個形狀必須使用相同的參考盒，並且兩個 <basic-shape> 列表中的值的數量和型別必須匹配。

兩個 <basic-shape> 函式列表中的每個值都會根據其計算值為 <number>、<length>、<percentage>、<angle> 或 calc()（如果可能）進行插值。如果這些值不是這些資料型別之一，但在兩個插值基本形狀函式之間是相同的（例如 nonzero），插值仍然可以發生。

  • 兩個形狀都是 ellipse() 或 circle() 型別：如果它們的半徑被指定為 <length> 或 <percentage>（而不是像 closest-side 或 farthest-side 這樣的關鍵字），則會在每個對應的值之間應用插值。

  • 兩個形狀都是 inset() 型別：在每個對應的值之間應用插值。

  • 兩個形狀都是 polygon() 型別：如果它們使用相同的 <fill-rule> 並且具有相同數量的逗號分隔座標對，則會在每個對應的值之間應用插值。

  • 兩個形狀都是 path() 型別：如果兩個形狀中的路徑字串在路徑資料命令的數量、型別和順序上匹配，則會對每個引數作為 <number> 應用插值。

  • 兩個形狀都是 shape() 型別：如果它們具有相同的命令關鍵字並使用相同的 <by-to> 關鍵字，則會在每個對應的值之間應用插值。如果在 clip-path 屬性中使用 shape()，並且兩個形狀還具有相同的 <fill-rule>，則它們會進行插值。

    • 如果它們使用 <curve-command> 或 <smooth-command>，則控制點的數量必須匹配才能進行插值。

    • 如果它們使用具有不同 <arc-sweep> 方向的 <arc-command>，則插值結果將按順時針（cw）方向進行。如果它們使用不同的 <arc-size> 關鍵字，則尺寸將使用 large 值進行插值。

  • 一個形狀是 path() 型別，另一個是 shape() 型別：如果路徑資料命令列表在數量和順序上都相同，則會在每個對應的值之間應用插值。插值後的形狀是一個 shape() 函式，並保持相同的路徑資料命令列表。

在所有其他情況下，不會發生插值，動畫是離散的。

示例

多邊形動畫

在此示例中，我們使用 @keyframes 規則在兩個多邊形之間為剪下路徑設定動畫。請注意，兩個多邊形具有相同數量的頂點，這是此類動畫正常工作所必需的。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}

結果

規範

規範
CSS Shapes Module Level 1
# basic-shape-functions

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ，由 MDN 貢獻者們修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.