使用CSS 3建立不規則圖形

前言

CSS 建立複雜圖形的技術即將會被廣泛支援，並且應用到實際項目中。本篇文章的目的是為大家開啟它的冰山一角。我希望這篇文章能讓你對不規則圖形有一個初步的瞭解。

現在，我們已經可以使用CSS 3 常見不規則複雜圖形了點選連結查看），如所示：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131229/1229133V2-0.png" width="644" height="430" />

使用CSS建立的圖形，無法內建文字或實現文字環繞效果。因此，如何?不規則圖形和文字複雜布局也成為了一個熱議話題。

今天我們就來介紹一下如何?這個效果。文章中我們將闡述如何使用 CSS建立不規則圖形，實現不規則的文本布局。學會如何建立不規則圖形之後，你就可以發揮想象力，建立唯美的CSS頁面了，既是使用該技術建立的《愛麗絲夢遊仙境》：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131229/122913G44-1.png" width="644" height="404" />

註：這是CSS的最新技術，所以對瀏覽器版本要求較高。如果需要查看線上樣本你需要確保瀏覽器支援這個CSS技術。在本文中我也將提供一些效果查看效果。

聲明圖形

我們需要使用shape-outside 屬性聲明不規則圖形。當前， shape-outside 屬性只能被應用於浮動元素，並且只能應用於區塊層級元素。如果需要在非區塊層級元素上使用這些屬性，必須先把元素宣告為塊級。

Shape-* 值有三種賦值方式: 自動，基本圖形或者圖片連結。如果被設定為自動，浮動元素將繼續作為傳統的盒模型進行渲染。如果你還不熟悉盒模型，請參考CSS盒模型，這是閱讀本篇文章的基礎。

繪製方法包括：rectangle、inset-rectangle、circle、ellipse或polygon方法等。你可以通過連結查看詳細的描述。

如果屬性被設定為圖片連結， 瀏覽器會按照圖片的“alpha通道”來繪製圖形形狀。

在元素上建立座標系

聲明了CSS 圖形之後，我們首先需要建立將用於繪製圖形的座標系。

座標系是非常必要的，因為圖形需要依據此座標繫上的點陣進行繪製。shape-* 屬性是基於盒模型的，為了使它啟作用，需要明確指定盒子的大小，限制不規則圖形在盒子範圍內，它也將被用於建立繪製座標系，座標系的起點位於形盒子左上方。如果沒有明確寬和高聲明， shape-* 屬性將不啟作用。

設定自訂圖形的背景色

應用了自訂圖形，它的盒模型仍然存在，其它傳統的樣式設定將作用於盒模型範圍。例如，下面這個例子中，

我們僅僅想建立一個浮動圓形，並設定這個圓形的背景色。按照正常的思路理解，效果應該是這樣的：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131229/1229131464-2.png" width="644" height="361" />

但是當設定了盒子的背景色後，你會發現和預期的效果不同，效果如下：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="clip_image001" border="0" alt="clip_image001" src="http://www.bkjia.com/uploads/allimg/131229/122913N95-3.gif" width="644" height="362" />

在中我們看到背景色被應用到盒模型範圍，而不是我們預想的圓形內。

那麼，我們應該怎樣設定圓形的背景色呢？這就引出了一個新的CSS樣式： clip-path 。clip-path 用於限制當前樣式的作用範圍。在下面的例子中你將看到它的使用方法。

提醒

現在，shape-outside 屬性只範圍浮動的元素，並且僅限制於在區塊層級元素上應用。使用這些屬性定義的元素，其周圍的文本將依賴於圖形形狀排布。未來的CSS 形狀將不僅僅限制與應用於浮動元素上，我們將不僅僅可以在文本外部的圖形上做文章，完全可以在其內部定義自訂圖形，實現如下效果：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="image" border="0" alt="image" src="http://www.bkjia.com/uploads/allimg/131229/1229133560-4.png" width="385" height="339" />

執行個體-使用shape-outside 建立環繞於自訂形狀的浮動文本

我們從一個簡單的例子開始。在執行個體中我們將建立一個自訂圖形，並且內建文字資料流，最終如下文章末尾提供執行個體下載連結）：650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="clip_image002" border="0" alt="clip_image002" src="http://www.bkjia.com/uploads/allimg/131229/122913NJ-5.jpg" width="656" height="310" />

例子中我們擁有兩個容器，用於設定自訂形狀和嵌套常值內容。代碼如下：

<div class="container">  <div class="shaped"></div>  <div class="content">    <span>La</span> Tour <br/>Eiffel                       Lorem Ipsum.....  </div></div>

首先我們需要聲明浮動地區的DIV節點，並且使用固定值設定大小。代碼如下：

.container{  overflow:hidden;  height: 100vh;   100vw;}.shaped{  float:left;  height:100vh;  ;  float:right;   black  url../images/eiffel.jpg） center top no-repeat;  background-size:cover;}

現在座標系已經建立成功，接下來我們將要繪製圖形了。可以通過兩種方式來繪製圖形：

使用 polygon）

我們可以使用polygon() 方法來計算圖形範圍。這個方法從座標系中擷取多個點用於繪製圖形，每個點由(x, y)值定位。 例子中我們將要建立一個非常簡單的多邊形，如所示：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="clip_image002[7]" border="0" alt="clip_image002[7]" src="http://www.bkjia.com/uploads/allimg/131229/122913D43-6.jpg" width="548" height="262" />

座標點的單位可以是固定值，或者百分比。在這個例子中我們將以百分比的形式設定點陣位置。接下來我們需要應用這個樣式在浮動元素上。

.shaped{/*…*/  shape-outside: polygon0 0, 100% 0, 100% 100%,30% 100%）;  shape-margin: 20px;}

應用以上的樣式後，一個不規則的圖形-梯形產生了。

可以看到代碼中使用了shape-margin 屬性，它用於設定圖形和常值內容之間的邊距。

接下來需要添加背景圖，需要注意在添加背景圖之後，它將被應用於盒模型，目前為止效果如下：

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="clip_image002[9]" border="0" alt="clip_image002[9]" src="http://www.bkjia.com/uploads/allimg/131229/1229135R8-7.jpg" width="614" height="289" />

所以，為了達到預期效果，我們需要設定clip-path 屬性，並且設定其範圍和shape-outside 屬性相同。

.shaped{/*…*/  clip-path: polygon0 0, 100% 0, 100% 100%,30% 100%）;}

現在，我們就通過polygon() 方法實現了目標效果。

使用圖片連結

我們也可以通過圖片嚴格說是擁有通明地區的圖片）來建立不規則圖形，依據圖片的“alpha通道” 產生不規則圖形。

例如，替代polygon() 聲明方法。我們可以設定shape-outside 屬性值為圖片URI，瀏覽器就會自動依據圖片來繪製不規則圖形。

650) this.width=650;" style="border-top-width:0px;border-bottom-width:0px;border-left-width:0px;" title="clip_image002" border="0" alt="clip_image002" src="http://www.bkjia.com/uploads/allimg/131229/1229134259-8.gif" width="640" height="301" />

圖片中的透明部分將被聲明為文本元素的浮動部分。其餘部分被聲明為不規則圖形。代碼如下：

.shaped{/*…*/  shape-outside: url/images/mm.png）;  shape-image-threshold: 0.5;這個屬性用於設定浮動地區透明度範圍}

上述的兩種方法都擁有各自的優缺點。例如，如果圖形過於複雜，通過圖片方法比手動計算圖形繪製節點更方便。

源碼下載

本文出自 “葡萄城控制項部落格” 部落格，請務必保留此出處http://powertoolsteam.blog.51cto.com/2369428/1324491