前言

CSS 創(chuàng)建復(fù)雜圖形的技術(shù)即將會被廣泛支持，并且應(yīng)用到實際項目中。本篇文章的目的是為大家開啟它的冰山一角。我希望這篇文章能讓你對不規(guī)則圖形有一個初步的了解。

現(xiàn)在，我們已經(jīng)可以使用CSS 3 常見不規(guī)則復(fù)雜圖形了，如下圖所示：

使用CSS創(chuàng)建的圖形，無法內(nèi)置文字或?qū)崿F(xiàn)文字環(huán)繞效果。因此，如何實現(xiàn)不規(guī)則圖形和文字復(fù)雜布局也成為了一個熱議話題。

今天我們就來介紹一下如何實現(xiàn)這個效果。文章中我們將闡述如何使用 CSS創(chuàng)建不規(guī)則圖形，實現(xiàn)不規(guī)則的文本布局。學(xué)會如何創(chuàng)建不規(guī)則圖形之后，你就可以發(fā)揮想象力，創(chuàng)建唯美的CSS頁面了，下圖既是使用該技術(shù)創(chuàng)建的《愛麗絲夢游仙境》效果圖：

注：這是CSS的最新技術(shù)，所以對瀏覽器版本要求較高。如果需要查看在線示例你需要確保瀏覽器支持這個CSS技術(shù)。在本文中我也將提供一些效果截圖查看效果。

聲明圖形

我們需要使用shape-outside 屬性聲明不規(guī)則圖形。當(dāng)前， shape-outside 屬性只能被應(yīng)用于浮動元素，并且只能應(yīng)用于塊級元素。如果需要在非塊級元素上使用這些屬性，必須先把元素聲明為塊級。

Shape-* 值有三種賦值方式: 自動，基本圖形或者圖片鏈接。如果被設(shè)置為自動，浮動元素將繼續(xù)作為傳統(tǒng)的盒模型進行渲染。如果你還不熟悉盒模型，請參考CSS盒模型，這是閱讀本篇文章的基礎(chǔ)。

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

如果屬性被設(shè)置為圖片鏈接， 瀏覽器會按照圖片的“alpha通道”來繪制圖形形狀。

在元素上創(chuàng)建坐標(biāo)系

聲明了CSS 圖形之后，我們首先需要創(chuàng)建將用于繪制圖形的坐標(biāo)系。

坐標(biāo)系是非常必要的，因為圖形需要依據(jù)此坐標(biāo)系上的點陣進行繪制。shape-* 屬性是基于盒模型的，為了使它啟作用，需要明確指定盒子的大小，限制不規(guī)則圖形在盒子范圍內(nèi)，它也將被用于創(chuàng)建繪制坐標(biāo)系，坐標(biāo)系的起點位于形盒子左上角。如果沒有明確寬和高聲明， shape-* 屬性將不啟作用。

設(shè)置自定義圖形的背景色

應(yīng)用了自定義圖形，它的盒模型仍然存在，其它傳統(tǒng)的樣式設(shè)置將作用于盒模型范圍。例如，下面這個例子中，

我們僅僅想創(chuàng)建一個浮動圓形，并設(shè)置這個圓形的背景色。按照正常的思路理解，效果應(yīng)該是這樣的：

但是當(dāng)設(shè)置了盒子的背景色后，你會發(fā)現(xiàn)和預(yù)期的效果不同，效果如下：

在上圖中我們看到背景色被應(yīng)用到盒模型范圍，而不是我們預(yù)想的圓形內(nèi)。

那么，我們應(yīng)該怎樣設(shè)置圓形的背景色呢？這就引出了一個新的CSS樣式： clip-path 。clip-path 用于限制當(dāng)前樣式的作用范圍。在下面的例子中你將看到它的使用方法。

提醒

現(xiàn)在，shape-outside 屬性只作用域浮動的元素，并且僅限制于在塊級元素上應(yīng)用。使用這些屬性定義的元素，其周圍的文本將依賴于圖形形狀排布。未來的CSS 形狀將不僅僅限制與應(yīng)用于浮動元素上，我們將不僅僅可以在文本外部的圖形上做文章，完全可以在其內(nèi)部定義自定義圖形，實現(xiàn)如下效果：

實例-使用shape-outside 創(chuàng)建環(huán)繞于自定義形狀的浮動文本

我們從一個簡單的例子開始。在實例中我們將創(chuàng)建一個自定義圖形，并且內(nèi)置文本流，最終效果圖如下（文章末尾提供實例下載鏈接）：

例子中我們擁有兩個容器，用于設(shè)置自定義形狀和嵌套文本內(nèi)容。代碼如下：

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表