目錄
方塊套方塊:這是我們網頁一直以來的樣子。通過使用CSS，我們一直試圖擺脫這種創建幾何形狀的限制,但這些形狀沒有影響形狀內的內容,或者與頁面其他元素相互影響。
由Adobe在2012年中期提出的新的CSS shapes 規範 改變了這一現狀。它的目標是爲web設計人員提供一種新的方式，來使內容流入或者環繞在任意複雜的形狀上——除了使用javascript，我們從來不曾做到這點。
直到目前爲止，Web上的佈局都侷限於規則矩形排列，無法讓內容流實現非矩形佈局。
在CSS Shapes出現之前，我們或多或少的受困於矩形行列的標準佈局。我們可能不得不向來自打印設計的設計者解釋一下：不，我們不能讓文本環繞在你裁切完美的碧昂斯的照片周圍。
你想要這樣：
對不起，你得到的是這樣：
以下設計中，周圍的文本流環繞在圓形圖片周圍。沒有css shapes,文本將形成矩形，從而失去了元素相互之間的聯繫,而這個聯繫是可以讓設計更上一層樓的。（注意這個例子中文本環繞在碗周圍這個設計。）
一、CSS Shapes簡介
1.功能簡介
CSS Shapes使網頁設計師能更好的實現自己的創意，除了簡單的長方形和正方形，還可以實現任何幾何圖形佈局。
該規範提供了兩個新的CSS屬性：shape-outside和shape-margin。瀏覽器支持這些規範是有一定道理的，儘管這些屬性目前僅可以在Chrome、Opera和Safari看到效果，而且還需要帶上瀏覽器的私有屬性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。
shape-outside屬性將使用內容能繞着不規則幾何圖形排列，不在是中規中距的矩形。最初也可以讓內容在一個元素內呈現，比如幾何圖形是一個圓形，那麼文本在這個圓形內呈現，文本也將呈現成一個圓圈形狀。
讓文本在一個幾何圖形內呈現，使用的是CSS Shapes中的shape-inside屬性。
2.瀏覽器支持
目前支持以下版本：
如果正使用Chrome瀏覽器（非Canary版本），可以粘貼以下代碼到地址欄：
chrome://flags/#enable-experimental-web-platform-features
然後在“啓用實驗性網絡平臺功能”下點擊“啓用”，最後選擇“立即重新啓動”來重啓瀏覽器，給其全新的CSS超級功能。
CSS shapes雖然支持的瀏覽器不多，但在CSS Shapes Module Level 1中已經達到候選推薦標準狀態,所以規範中定義的屬性和語法是相當穩定的。
在其他瀏覽器中實現的時間不會很久。這個級別側重於使用形狀屬性，來改變一個環繞在某形狀旁的內容流的佈局。更具體地說,它關注的是shape-outside屬性及其相關屬性。
結合其他先進功能,如剪切和蒙版,CSS濾鏡,合成和混合模式,CSS shapes 將使我們在無須訴諸做圖軟件（如photoshop或者indesign）的情況下，創造更多絢麗且複雜的設計。
二、怎樣使用CSS Shapes
1.shape-outside屬性
其在元素的周圍定義一個與衆不同的浮動區域。元素把圍繞在它周圍的文字流包裹成圓形、多邊形或者橢圓形，而不只是矩形。它在元素的浮動盒子邊界裏裁剪好一個可以被文字環繞的新區域。
話不多說，先來個例子
HTML部分：
<div class="container">
<h1>Laplanders</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-2.jpg" class="lapland" />
<p>They can bend bows most easily that the most powerful Swedes or Norwegians could not bend at all. They dress,as you see, altogether in skins or coarse wool. The women dress very like the men, turning their hair up in a funny kind of knot.</p>
<p>The children, when small, are slung at their mother's back. They live in huts, or more often tents, made of wood and covered with cloth, with a hole at the top to let the smoke out. These tents have two doors, one for the men and the other for the women, as it is considered unlucky to meet a woman on going out to hunt.</p>
<p>When a young man and woman are engaged to one another, as often as the young man pays a visit to his betrothed, he has to bring a bottle of brandy for the father-in-law — an arrangement which the father-in-law likes so much, that he keeps his daughter engaged as long as he can ; and when the marriage takes place, the son-in-law has to remain a year and work for his wife's father - before he can go off to his own home.</p>
</div><!-- container -->
CSS部分：
@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/typeplate.css";
@import url(https://fonts.googleapis.com/css?family=Holtwood+One+SC|Quattrocento);
body {
background: #990707;
color: #ffffff;
font-family: 'Quattrocento', serif;
}
h1 {
color: #ffffff;
font-family: 'Holtwood One SC', serif;
font-size: 70px;
font-weight: normal;
padding-top: 10px;
text-align: center;
}
.container {
max-width: 600px;
}
.lapland {
float: left;
shape-outside: inset(1% round 45%);
max-width: 400px;
width: 70%;
}
來個特寫：
shape-outside: inset(1% round 45%)讓圖片的轉角變得與圖形的自然邊框半徑很吻合；
Shape共有兩種屬性：
- shape-outside 讓文本圍在圖形外，和shape-margin屬性一起使用
- shape-inside把文本包裝在形狀的內部，和shape-padding一起使用
注意：shape-outside的四個形狀函數在這篇文章末尾已有介紹。現在只給出對應的實例方便學習
· circle()--圓形
· ellipse()--橢圓
· inset()--矩形（內矩形）
· polygon()--多邊形
(1)圓形:circle()函數
.circle
{/* general styles for the div*/
width: 200px;
height: 200px;
background-color: #A4F4B0;
border-radius: 50%; /* make it a shape!*/
shape-outside: circle();
float: left;
}
注意：closest-side使用從形狀的中心到盒子參考模型的最近的邊緣的距離作爲半徑，相反的，farthest-side使用到最遠的邊緣的距離。shape-radius如果爲空默認值使用closest-side。
(2)橢圓:ellipse()函數
.ellipse {
width: 100px;
height: 200px;
background-color: #A4F4B0;
border-radius: 50%;
shape-outside: ellipse();
float: left;
}
(3)矩形:inset()函數
.inset {
width: 200px;
height: 160px;
background-color: #A4F4B0;
border-radius: 50px;
shape-outside: inset(0px round 50px);
float: left;
}
注意：直接在元素上應用border-radius產生的圓角效果只是使元素邊框和背景變成圓角矩形，並不能讓文字按圓角浮動；
(4)多邊形：plygon()函數
.polygon {
width: 200px;
height: 200px;
clip-path: polygon(0 0, 0 200px, 200px 100px);
background-color: #A4F4B0;
shape-outside: polygon(0 0, 0 200px, 200px 100px);
float:left;
}
2.Shape的參考盒模型
CSS shapes 通過參考盒來定義並且創建,這個盒子用來繪製元素上的形狀。除了元素的高度和寬度,元素的盒模型——margin box,content box,padding box,和border-box也作爲指定元素形狀的參考。
默認情況下,使用margin box盒模型作爲參考,因此如果你想應用形狀的那個元素底部有一個邊距,你在元素上定義的那個形狀將擴展到外邊距的邊緣,而不是元素的邊緣。如果您想要使用另一種盒模型,您可以同時指定盒模型與形狀函數,之後傳遞給形狀屬性:
shape-outside: circle(250px at 50% 50%) padding-box;
上面的規則中padding-box關鍵字表明，形狀會適用於元素的padding box(padding 盒模型)。circle()函數定義了元素上形狀爲圓形，以及圓形的大小和位置。
三、CSS Shapes拓展
1.利用圖片來定義一個形狀
我們可以給shape-outside屬性傳一個url()函數。使用這個功能可以給其添加一個背景圖像。在這個示例中，允許通過url()給shape-outside屬性定義一個元素形狀是基於圖像的。
當你有一個特別複雜的形狀，或者有很多曲線和點，你想讓你的內容可以更好的圍繞這個圖形，這個時候，可以使用url()來替代polygon()。或者說，你定認形狀非常棘手時，也可以考慮這樣的方式。
首先，你需要創建一個帶有透明度的圖像：
把最初的鸚鵡圖像當作的容器的背景圖，添加到容器上：
.container {
background-repeat: no-repeat;
background-image: url('../img/parrot.png');
}
透明度的閾值
形狀本身將添加到容器內的另一個元素上，這一次我們使用了另一個CSS屬性shape-image-threshold。
.shape {
shape-margin: 15px;
shape-outside: url('../img/parrot-shape.png');
shape-image-threshold: 0;
}
這處屬性定義了圖像形狀最低透明度的閾值，它可以是一個0到1之間的數字。所以，如果你想讓你的圖像具有一定的透明度，可以將其設置爲0.8或0.5。如果設置其值爲0，那麼鸚鵡圖像周邊區域完全是透明的。
最後的效果看起來像這樣：
完整代碼：（建議使用Chrome瀏覽器）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鸚鵡</title>
<style type="text/css">
clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
body {
font-family: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
color: #66595c;
background-color: #faf6ec;
}
/* Start the styles */
blockquote {
font-family: "Lucida Bright", Georgia, serif;
font-style: italic;
}
blockquote {
padding-top: 40px;
}
blockquote p {
line-height: 1.6;
color: #000;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.32);
}
.container {
width: 600px;
height: 900px;
margin: 30px auto;
background-image: url('https://lourfield.github.io/advanced-css-shapes/img/parrot.jpg');
background-repeat: no-repeat;
}
.shape {
width: 600px;
height: 900px;
float: left;
shape-image-threshold: 0.5;
shape-outside: url('https://lourfield.github.io/advanced-css-shapes/img/parrot-shape.png');
shape-margin: 15px;
}
</style>
</head>
<body>
<div class="support-css-shapes"></div>
<div class="container clearfix">
<div class="shape"></div>
<blockquote>
<p><strong>Parrots</strong>, also known as psittacines are birds of the roughly 393 species in 92 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. The order is subdivided into three superfamilies: the Psittacoidea
("true" parrots), the Cacatuoidea (cockatoos), and the Strigopoidea (New Zealand parrots). Parrots have a generally pantropical distribution with several species inhabiting temperate regions in the Southern Hemisphere, as well. The greatest diversity
of parrots is in South America and Australasia.</p>
</blockquote>
</div>
</body>
</html>
四、Shape工具
使用形狀函數創建複雜的形狀有可能非常艱難,特別是如果你通過許多的點和座標，通過polygon()函數創建一個多邊形時。
值得慶幸的是,Adobe的web平臺團隊一直致力於開發交互式工具使這更容易。貝爾特拉維斯已經創建了一個形狀工具,使我們能夠可視化的創建多邊形形狀。這個工具可以根據形狀生成形狀函數。這是非常有用的,但如果你想創建一個基於特定圖像的形狀就不可以了,因爲這個工具不支持插入圖像然後創建形狀。
更先進，更富有交互力圖形工具是由Adobe網絡平臺團隊開發的。近日發佈的工具作爲Adobe免費的Brackets編輯器的擴展。它允許您可視化的在瀏覽器中直接編輯形狀,並提供實時預覽功能,當改變它們的形狀時更新樣式表的值。你的更改會有即時的視覺反饋,讓你能夠了解到你的形狀是如何與頁面上的其他元素進行交互的。
在瀏覽器中編輯多邊形形狀，並在右邊使用bracket的實時預覽模式來預覽。
---部分論述及案例轉載自W3cplus