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

開始使用 CSS 形狀

納入自訂路徑周圍的內容

Razvan Caliman

長久以來，網頁設計人員不得不在矩形的限制範圍內建立網頁。大部分的創意冒險仍然是單純的方塊設計，因為大部分的創意冒險都會變成沒有矩形的版面配置。我們將自 Chrome 37 開始，導入 CSS 形狀。 CSS 形狀可讓網頁設計人員在自訂路徑 (例如圓形、刪節號和多邊形) 周圍納入內容，因此不必受限於矩形。

形狀可以手動定義，也可以從圖片中推論。

一起來看看這個簡單的範例。

或許在第一次疊加圖片時，您可能跟我一樣，看著包含透明部分的內容來填滿整個空間，而這只會對元素周圍的矩形環繞形狀感到失望。您可以使用 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 值的相對浮動區域。舉例來說，如果含有咖啡杯圖片的元素向左浮動，系統會在杯子的右側建立浮動區域。即使您可以設計圖片兩側有間隔，內容仍只會沿著浮點屬性指定的相反方向 (左側或右側) 繞過形狀，無法兩者同時圍繞。

日後，只要是未以 CSS 排除功能浮動的元素，皆可使用 shape-outside。

手動建立形狀

除了從圖片中擷取形狀之外，您也可以手動撰寫圖片。建立形狀時，您可以從幾個函式值中進行選擇：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;
}

座標系統的起點現在位於元素的內容區域 (100px 向上和 100px)，和圓形中心一樣。圓形半徑的計算值也會不斷增加，以因應 margin-box 參照方塊建立的座標系統表面的增加。

開始使用 CSS 形狀

手動建立形狀

Circle() 函式

CSS 形狀的參考方塊

ellipse() 函式

Polygon() 函式

inset() 函式

使用參考方塊建立形狀

形狀邊界

建立形狀動畫

將內容納入形狀

漸進式增強

與 CSS 排除條件區分

CSS 形狀使用工具

結論