基於影像的形狀
在本指南中，我們將瞭解如何使用帶有 Alpha 通道的影像檔案或甚至 CSS 漸變來建立形狀。這是一種非常靈活的建立形狀的方法。與其在 CSS 中使用複雜的 `polygon()` 繪製路徑，不如在圖形程式中建立形狀，然後使用不透明度低於閾值畫素所建立的路徑。
從影像建立形狀
要使用影像建立形狀，影像需要具有 Alpha 通道，即不完全不透明的區域。shape-image-threshold 屬性用於為此不透明度設定閾值。不透明度高於此值的畫素將用於計算形狀的區域。
在下面的示例中，有一個星星影像，它有一個純紅色區域和一個完全透明的區域。影像檔案的路徑用作 shape-outside 屬性的值。內容現在圍繞星形進行環繞。
<div class="box">
<img
alt="A red star"
src="https://mdn.github.io/shared-assets/images/examples/star-shape.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>
body {
font: 1.2em / 1.5 sans-serif;
}
img {
float: left;
shape-outside: url("https://mdn.github.io/shared-assets/images/examples/star-shape.png");
}
你可以使用 shape-margin 將文字從形狀移開，在建立的形狀和文字之間留出邊距。
body {
font: 1.2em / 1.5 sans-serif;
}
img {
float: left;
shape-outside: url("https://mdn.github.io/shared-assets/images/examples/star-shape.png");
shape-margin: 20px;
}
CORS 相容性
從影像建立形狀時你會遇到的一個問題是，你使用的影像必須 CORS 相容。託管在你網站同一域上的影像應該可以正常工作，但是，如果你的影像託管在不同的域上（例如 CDN），則應確保它們傳送正確的標頭以使其可用於形狀。由於對 CORS 相容影像的此要求，如果你在本地預覽檔案而沒有使用本地 Web 伺服器，則你的形狀將無法工作。
這是一個 CORS 問題嗎？
DevTools 可以幫助你識別 CORS 錯誤。在 Chrome 中，控制檯會提醒你 CORS 問題。在 Firefox 中，如果你檢查屬性，你會收到影像無法載入的警報。這應該會提醒你，由於 CORS，你的影像不能用作形狀的來源。
設定閾值
shape-image-threshold 屬性可以從不完全透明的區域建立形狀。如果 shape-image-threshold 的值為 0.0（這是初始值），則該區域必須完全透明。如果值為 1.0，則它完全不透明。介於兩者之間的值意味著你可以將半透明區域設定為定義區域。
在下面的示例中，星星的背景不是完全透明的，它在我的圖形程式中建立時具有 20% 的不透明度。如果我將 shape-image-threshold 設定為 0.2 或更大，那麼我看到形狀，如果我將其設定為小於 0.2，則我得不到形狀。
body {
font: 1.2em / 1.5 sans-serif;
}
img {
float: left;
shape-outside: url("https://mdn.github.io/shared-assets/images/examples/star-red-20.png");
shape-image-threshold: 0.2;
}
使用帶生成內容的影像
在上面的示例中，我既將影像用作 shape-outside 的值，也將其新增到了頁面中。許多演示都這樣做，因為它有助於顯示我們正在跟隨的形狀，但是 shape-outside 屬性與頁面上顯示的影像無關，因此你無需顯示影像即可使用影像建立形狀。
你確實需要一些浮動的東西，但這可能是一些生成的內容，如以下示例所示。我正在浮動生成的內容，並使用一個更大的星形影像來塑造我的內容，而不在頁面上顯示任何影像。
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
.box::before {
content: "";
float: left;
width: 400px;
height: 300px;
shape-outside: url("https://mdn.github.io/shared-assets/images/examples/star-shape.png");
shape-image-threshold: 0.3;
}
使用漸變建立形狀
因為 CSS 漸變被視為影像，所以你可以透過將透明或半透明區域作為漸變的一部分來使用漸變生成形狀。
下一個示例使用生成的內容。內容已浮動，為其提供了線性漸變的背景影像。我使用相同的值作為 shape-outside 的值。線性漸變從紫色變為透明。透過更改 shape-image-threshold 的值，你可以決定建立形狀的畫素需要有多透明。你可以在下面的示例中嘗試該值，以瞭解對角線如何根據該值在形狀上移動。
你還可以嘗試完全刪除背景影像，從而純粹使用漸變建立形狀，而根本不將其顯示在頁面上。
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
.box::before {
content: "";
float: left;
height: 250px;
width: 400px;
background-image: linear-gradient(
to bottom right,
rebeccapurple,
transparent
);
shape-outside: linear-gradient(to bottom right, rebeccapurple, transparent);
shape-image-threshold: 0.3;
}
下一個示例使用帶有橢圓的徑向漸變，再次使用漸變的透明部分來建立形狀。
body {
font: 1.2em / 1.5 sans-serif;
}
.box::before {
content: "";
float: left;
height: 250px;
width: 400px;
background-image: radial-gradient(
ellipse closest-side,
rebeccapurple,
blue 50%,
transparent
);
shape-outside: radial-gradient(
ellipse closest-side,
rebeccapurple,
blue 50%,
transparent
);
shape-image-threshold: 0.3;
}
你可以在這些即時示例中直接進行實驗，以瞭解更改漸變如何改變形狀的路徑。