本頁面由 Cloud Translation API 翻譯而成。

開始使用 CSS 形狀

圍繞自訂路徑來納入內容

Razvan Caliman

長期以來，網頁設計師都必須在矩形的限制範圍內進行設計。由於大多數創意嘗試採用非矩形版面配置的結果都令人失望，因此網站上的大部分內容仍侷限於簡單的方塊。不過，這項情況即將改變，因為 Chrome 37 以上版本將推出 CSS 形狀功能。CSS Shapes 可讓網頁設計人員在自訂路徑 (例如圓形、刪節號和多邊形) 周圍環繞內容，因此不再受限於矩形的限制。

您可以手動定義形狀，也可以從圖片推斷出形狀。

讓我們來看一個非常簡單的例子。

想像一下，你像我一樣，第一次在圖片上漂浮，並預期內容可以包裝及填補空隙，只因為在元素周圍的長方形環繞形狀感到失望。您可以使用 CSS 形狀解決這個問題。

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

shape-outside: url(image.png) CSS 宣告會告訴瀏覽器從圖片中擷取形狀。

shape-image-threshold 屬性會定義用來建立形狀的像素最小不透明度。其值必須介於 0.0 (完全透明) 和 1.0 (完全不透明) 之間。因此，shape-image-threshold: 0.5 表示只有不透明度 50% 以上的像素會用來建立形狀。

float 屬性在此處扮演關鍵角色。雖然 shape-outside 屬性可定義內容會套用的區域形狀，但如果沒有浮動，您就不會看到形狀的效果。

元素在 float 值的另一側有浮動區域。舉例來說，如果含有咖啡杯圖片的元素浮動至左側，浮動區域就會建立在咖啡杯的右側。雖然您可以設計出兩側都有空白的圖片，但內容只會在浮動屬性指定的對角形狀 (左或右) 上左右對齊，不會同時在兩側對齊。

日後，您可以在不浮動元素上使用 shape-outside，這項功能是透過 CSS 排除項目引入。

手動建立形狀

除了從圖片中擷取形狀外，您也可以手動編寫程式碼。您可以選用幾個函式值來建立形狀：circle()、ellipse()、inset() 和 polygon()。每個形狀函式都會接受一組座標，並與建立座標系統的參考方塊配對。立即進一步瞭解參考方塊。

circle() 函式

圓形形狀值的完整符號為 circle(r at cx cy)，其中 r 是圓形的半徑，cx 和 cy 則是 X 軸和 Y 軸上圓心座標。圓心座標為選用項目。如果省略這些值，系統會使用元素的中心 (對角線的交會點) 做為預設值。

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

在上述範例中，內容會環繞圓形路徑外側。單一引數 50% 會指定圓形的半徑，在本例中，這個半徑等於元素寬度或高度的一半。變更元素的尺寸會影響圓形圖形的半徑。以下是 CSS 圖形如何回應式的基本範例。

在繼續閱讀之前，請先注意一點：CSS 形狀只會影響元素周圍浮動區域的形狀。如果元素有背景，則不會遭到形狀裁剪。如要達到這種效果，您必須使用 CSS 遮罩的屬性，也就是 clip-path 或 mask-image。clip-path 屬性非常實用，因為它遵循 CSS 形狀的符號，因此您可以重複使用值。

這份文件包含多種插圖，您可以透過裁剪功能醒目顯示圖案，協助您瞭解相關效果。

回到圓形。

使用百分比做為圓半徑時，實際上是採用稍微複雜的公式計算這個值：sqrt(width^2 + height^2) / sqrt(2)。瞭解這一點很有幫助，因為這有助於您想像，如果元素的尺寸不相等，產生的圓形會是什麼形狀。

所有 CSS 單位類型都可以用於形狀函式座標，包括 px、em、rem、vw、vh 等。您可以根據需求選擇彈性或固定的版本。

您可以為圓心座標設定明確的值，藉此調整圓形的位置。

.element{
  shape-outside: circle(50% at 0 0);
}

這會將圓形中心定位在座標系統的起點。什麼是座標系統？這就是我們要介紹參考方塊的地方。

CSS 形狀的參考方塊

參考框是元素周圍的虛擬方塊，會建立用來繪製和放置形狀的座標系統。座標系統的起點位於左上角，X 軸指向右側，Y 軸指向下方。

請注意，shape-outside 會變更內容會套入其中的浮動區域形狀。浮動區域會延伸至 margin 屬性定義的方塊外緣。這稱為 margin-box，如果未明確提及任何形狀，則為預設的參考方塊。

以下兩個 CSS 宣告的結果相同：

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

我們尚未為元素設定邊界。此時，可以放心假設座標系統的起點和圓形中心位於元素內容區域的左上角。這樣做會變更設定邊界：

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

座標系統的起點現在位於元素的內容區域 (向上 100 px，左方 100 像素)，以及圓形中心之外。隨著 margin-box 參考方塊建立的座標系統表面增加，圓形半徑的計算值也會隨之增加。

開始使用 CSS 形狀

手動建立形狀

circle() 函式

CSS 形狀的參考方塊

ellipse() 函式

polygon() 函式

inset() 函式

根據參考方塊建立形狀

形狀邊界

為形狀製作動畫

在形狀內換行顯示內容

漸進增強

瞭解與 CSS 排除條件的差異

使用 CSS 形狀的工具

結論