1. Web
  2. CSS
  3. CSS 形狀
  4. 概述

形狀概述

CSS 形狀模組用於在 CSS 中描述幾何形狀。本文概述瞭如何使用形狀來使文字環繞那些不一定是矩形的浮動元素。

當你將一個元素向左浮動時，文字會以矩形的方式環繞在該元素的右側和下方。而使用 CSS 形狀，你可以應用一個圓形，這樣文字就會沿著圓形的邊緣進行環繞。

有多種方法可以建立這個圓形。在本指南中，我們將瞭解 CSS 形狀的工作原理以及如何使用它們。

該規範定義了什麼？

該規範定義了一些屬性，包括：

  • shape-outside — 允許定義基本形狀。
  • shape-image-threshold — 設定一個不透明度閾值。如果使用影像來定義形狀，只有影像中不透明度等於或大於該閾值的部分才會被用於形狀。任何其他部分都將被忽略。
  • shape-margin — 為定義的形狀設定外邊距。

定義基本形狀

shape-outside 屬性允許我們定義一個形狀。它接受在 <basic-shape> 資料型別中指定的各種值來定義不同的形狀。

在下面的示例中，一張圖片向左浮動。我們應用了 shape-outside 屬性，其值為 circle(50%)。結果是，內容現在會沿著圓形彎曲，而不是沿著圖片盒子建立的矩形排列。

html
<div class="box">
  <img
    alt="An orange hot air balloon as seen from below"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em / 1.4 sans-serif;
}

img {
  float: left;
  shape-outside: circle(50%);
}

這裡我們使用了所有現代瀏覽器都支援的 circle() 函式。如果我們使用一個未得到完全支援的較新形狀型別，不支援的瀏覽器的使用者會看到內容沿著矩形的邊緣流動，因為圖片是浮動的。形狀是一種視覺上的漸進增強。

基本形狀

值 circle(50%) 是一個基本形狀的例子。該規範定義了幾個 <basic-shape> 值，包括：

其中三個函式僅定義矩形。使用 inset() 函式，你可以定義四個偏移值，從而將任何環繞內容的行框拉得比原本更靠近物件。rect() 函式透過指定距包含塊頂部和左側邊緣的距離來定義一個矩形。xywh() 函式透過指定距參考框頂部和左側邊緣的距離，並從該起點設定矩形的寬度和高度來工作。

我們已經看到了 circle() 如何建立一個圓形。ellipse() 本質上是一個被壓扁的圓。如果這些基本形狀都不能滿足需求，你可以使用 polygon() 函式建立更復雜的形狀，該函式允許定義一系列的線段。path() 和 shape() 函式可用於透過一系列線段、曲線和移動命令建立任意形狀。

在我們的基本形狀指南中，我們探討了每種可能的基本形狀以及如何建立它們。

基於盒子值的形狀

形狀也可以圍繞盒子值建立。因此，你可以在以下盒子上建立形狀：

  • border-box
  • padding-box
  • content-box
  • margin-box

在下面的示例中，你可以將值 border-box 更改為任何其他允許的值，以觀察形狀如何靠近或遠離盒子。

html
<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em / 1.4 sans-serif;
}

.shape {
  background-color: rebeccapurple;
  height: 150px;
  width: 150px;
  padding: 20px;
  margin: 20px;
  border-radius: 50%;
  float: left;
  shape-outside: border-box;
}

要更詳細地探索盒子值，請參閱我們關於基於盒子值的形狀的指南。

基於影像的形狀

一種有趣的生成路徑的方法是使用帶有 Alpha 通道的影像——文字會環繞影像中不透明的部分。這允許環繞內容覆蓋在影像上，或者使用一個從未在頁面上顯示的影像，純粹作為一種建立複雜形狀的方法，而無需仔細繪製多邊形。

請注意，以這種方式使用的影像必須是 CORS 相容的，否則 shape-outside 的行為將如同值為 none 一樣，你將得不到任何形狀。

在下一個示例中，我們有一個帶有完全透明區域的影像，並且我們使用該影像的 URL 作為 shape-outside 的值。形狀是圍繞不透明區域——即氣球的影像——建立的。

html
<div class="box">
  <img
    alt="An orange hot air balloon as seen from below"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em / 1.4 sans-serif;
}

img {
  float: left;
  shape-outside: url("https://mdn.github.io/shared-assets/images/examples/round-balloon.png");
}

shape-image-threshold

shape-image-threshold 屬性用於設定影像透明度的閾值，該閾值用於定義形狀所使用的影像區域。如果 shape-image-threshold 的值為 0.0（這是初始值），則該區域必須是完全透明的。如果值為 1.0，則該區域是完全不透明的。介於兩者之間的值意味著你可以將半透明區域設定為形狀的定義區域。

如果我們使用漸變作為定義形狀的影像，你就可以看到閾值的作用。在下面的示例中，如果你更改閾值，形狀所採用的路徑會根據你選擇的不透明度級別而改變。

html
<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em / 1.4 sans-serif;
}

.shape {
  float: left;
  width: 200px;
  height: 200px;
  background-image: linear-gradient(
    45deg,
    rebeccapurple,
    transparent 80%,
    transparent
  );
  shape-outside: linear-gradient(
    45deg,
    rebeccapurple,
    transparent 80%,
    transparent
  );
  shape-image-threshold: 0.4;
}

要了解有關從影像建立形狀的更多資訊，請參閱基於影像的形狀指南。

shape-margin 屬性

shape-margin 屬性為 shape-outside 新增一個外邊距。這會進一步縮短環繞形狀的任何內容的行框，使其遠離形狀本身。

在下面的示例中，我們為一個基本形狀添加了 shape-margin。更改外邊距，使文字比形狀預設路徑更遠離。

html
<div class="box">
  <img
    alt="An orange hot air balloon as seen from below"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em / 1.4 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 5px;
}

使用生成內容作為浮動項

在上面的示例中，我們使用了影像或可見元素來定義形狀，這意味著你可以在頁面上看到該形狀。但有時，你可能希望讓一些文字沿著一條不可見的非矩形線條流動。例如，我們可以在 DOM 中新增一個空的浮動 <div> 或 <span> 元素並使其不可見。然而，我們可以僅使用 CSS 和生成內容來建立一個形狀，並將所有樣式功能保留在 CSS 中。

在此示例中，我們使用生成內容插入了一個高度和寬度均為 150px 的元素。然後，我們可以使用基本形狀、盒子值，甚至影像的 Alpha 通道來建立一個供文字環繞的形狀。

html
<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}

.box::before {
  content: "";
  display: block;
  height: 150px;
  width: 150px;
  padding: 20px;
  margin: 20px;
  border-radius: 50%;
  float: left;
  shape-outside: border-box;
}

與 clip-path 的關係

用於建立形狀的基本形狀和盒子值與用作 clip-path 值的那些相同。因此，如果你想使用影像建立一個形狀，並同時裁剪掉該影像的一部分，你可以使用相同的值。

下圖是一張帶有藍色背景的正方形影像。我們使用 shape-outside: ellipse(40% 50%); 定義了一個形狀，並使用 clip-path: ellipse(40% 50%); 裁剪掉了我們用於定義形狀的相同區域。

html
<div class="box">
  <img
    alt="An orange hot air balloon as seen from below"
    src="https://mdn.github.io/shared-assets/images/examples/balloon-small.jpg" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>
css
body {
  font: 1.2em / 1.4 sans-serif;
}

img {
  float: left;
  shape-outside: ellipse(40% 50%);
  clip-path: ellipse(40% 50%);
}

用於形狀的開發者工具

Firefox 開發者工具中有一個形狀路徑編輯器。此工具可用於檢查 circle()、inset()、ellipse() 和 polygon() 的值。如果你的多邊形不太對，你可以使用形狀編輯器對其進行調整，然後將新值複製回你的 CSS 中。

更多 CSS 形狀特性

在本指南中，我們討論瞭如何使文字環繞浮動形狀。請參閱 CSS 形狀模組以獲取該模組所有特性以及其他相關特性的連結。這包括所有形狀函式和相關指南。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們更新。

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