CSS shapes簡介

css Shapes 允許我們通過自定義文本內容可以環繞的幾何形狀，圖像和漸變，來創建有趣且獨特的布局。本次教程會教你如何使用他們。

在 CSS Shapes問世之前，為網頁設計文本自由環繞的雜志式布局幾乎是不可能的。相反，網頁設計布局傳統上一直用網格，盒子和直線構造。

CSS Shapes允許我們自定義環繞的幾何形狀。這些形狀可以是圓，橢圓，簡單或復雜的多邊形，甚至圖像和漸變。Shapes的一些實際設計應用可能是圓形頭像周圍顯示圓形環繞文本，全屏背景圖片的簡單部位上面展示文本，以及在文章中顯示首字下沉。

現在CSS Shapes已經獲得了現代瀏覽器的廣泛支持，值得一看的是他們提供的靈活性和功能，以確定他們在你的下一個設計項目中是否能派上用場。

注意：截至攥寫本文時，CSS Shapes 支持 Firefox、Chrome、Safari 和 Opera，以及 iOS Safari 和 Chrome for Android 等移動瀏覽器。Shapes 不支持 IE，對 Microsoft Edge 的支持正在考慮中。

CSS Shapes初探

CSS Shapes 的當前實現是 CSS Shapes Module Level 1。它主要包含【shape-outside】屬性。shape-outside定義了文本環繞的形狀。

考慮到有 shape-outside屬性，你可能會想到還有一個相應的shap-inside屬性，它包含形狀內的文本。shap-inside屬性可能會在將來實現，目前它只是 CSS Shapes Module Level 2里面的一個草案，并沒有被任何瀏覽器實現。

在文本中，我們將演示如何使用 數據原型，并使用形狀函數值設置它，以及使用半透明URL或漸變設置形狀。

基本的形狀函數

我們可以通過將下列函數值應用于 shape-outside屬性來定義css中的各種基本形狀：

• circle（）
• ellipes(）
• inset（）
• polygon（）

要給元素設定 shape-outside 屬性，該元素必須是浮動的并且已設定寬高。讓我們逐個來看四個基本形狀，并演示他們的使用方法。

圓

我們將從circle（）函數開始。設想如下場景，有一個圓形的作者頭像，我們想讓頭像左浮動并且作者的描述文本環繞它。僅對頭像元素使用 **border-radius： 50%**不足以使文本呈圓形；文本仍將把頭像當成矩形元素。

通過圓形，我們可以演示文本如何按圓形環繞。

首先我們在一個普遍的div上創建circle樣式，并且設置 shape-outside 為 circle（）

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
}

如果我們訪問頁面，會看到如下場景。

如你所見，文本環繞圓形環繞，但是我們并沒有看到任何形狀。使用開發工具審查元素，我們可以看到已經設置好的實際形狀。

此時，你可能會認為，給元素background設置顏色或者圖片就能看到形狀了。我們來試下。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
  background: linear-gradient(to top right, #FDB171, #FD987D);
}

不幸的是，給circle設置background后會顯示一個矩形，這是我們一直試圖避免的事情。

我們可以清晰地看到文本在它周圍環繞，但元素本身沒有形狀。如果我們想要真實地顯示形狀函數，需要使用clip-path
屬性。clip-path采用許多和shape-outside相同的值，因此我們可以給它同樣的circle（）值。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
  clip-path: circle();
  background: linear-gradient(to top right, #FDB171, #FD987D);
}

在本文剩下的部分，我將使用 clip-path 幫助我們辨認形狀。

circle() 函數接收可選的 radius 參數。在本例中，默認 radius 是 50% 或者 100px。使用 circle(50%) 或者 circle(100px) 都將產生和我們已經完成樣例的同樣結果。

你可能注意到文本剛好和形狀貼合。我們可以使用 shape-margin 屬性給形狀添加 margin，單位可以是 px、em、% 和其他標準的 CSS 測量單位。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle(25%);
  shape-margin: 1rem;
  clip-path: circle(25%);
  background: linear-gradient(to top right, #FDB171, #FD987D);
}

這里有個 circle radius 設置 25% 并且使用 shape-margin 的例子。

除了 radius，形狀函數可以使用 at 定位。默認位置是圓心，因此 circle() 也可以被顯式設置為 circle(50% at 50% 50%) 或 circle(100px at 100px 100px)，兩個值分別是水平和垂直位置。

為了搞清楚 position 的作用，我們可以設置水平位置值為 0 來創造一個完美的半圓。

circle(50% at 0 50%);

該坐標定位系統稱為引用框。

稍后，我們將學習如何使用圖像代替形狀或者漸變。現在，我們將繼續進行下一個形狀函數。

橢圓

ellipse() 和 circle() 函數類似，只是它會創造橢圓。為了演示，我們創建一個 ellipse 元素和樣式。

<div class="ellipse"></div>
<p>Example text...</p>

.ellipse {
  float: left;
  shape-outside: ellipse();
  clip-path: ellipse();
  width: 150px;
  height: 300px;
  background: linear-gradient(to top right, #F17BB7, #AD84E3);
}

這次，我們設置不同的 height 和 width 創建一個垂直拉長的橢圓。

ellipse() 和 circle() 的區別在于橢圓有兩個半徑 —— _r_x 和 _r_y，或者 X 軸半徑和 Y 軸半徑。因此，上面的例子也可以寫成：

ellipse(75px 150px);

circles 和 ellipses 的位置參數是一樣的。除了是測量單位，半徑也包括 farthest-side 和 closest-side 的選項。

closest-side 代表引用框的中心到最近側的長度，相反，farthest-side 代表引用框中心到最遠側的長度。這意味著如果未設置默認值以外的位置，則這兩個值無效。

這里演示了在 ellipse() 上翻轉 closest-side 和 farthest-side 的區別，它的 X 和 Y 軸的偏移量是 25%。

ellipse(farthest-side closest-side at 25% 25%)

ellipse(farthest-side closest-side at 25% 25%)

未完待續。。。。。。。

太他娘的多了。。。。。。

我吐了。。。。。。。。