布局一般都是遵循按行和列等線性原則，Web網站的布局到今天為止很大程度上受到這些原則的影響。雖然CSS Grid的出現讓布局變得更好，更靈活，但相對于印刷媒體而言，Web布局總體上還是受到很好的限制，特別是內容流上。

雜志和報紙一直有很好的辦法來安排內容。比如文本繞著非矩形排列。

直到目前為止，Web上的布局都局限于規則矩形排列，無法讓內容流實現非矩形布局。

接下來讓我們一起探討如何使用CSS Shapes模塊讓Web布局能像雜志和報紙一樣讓文本內容實現不規則矩形排列。

CSS Shapes簡介

CSS Shapes使網頁設計師能更好的實現自己的創意，除了簡單的長方形和正方形，還可以實現任何幾何圖形布局。改規范提供了兩個新的CSS屬性：shape-outside和shape-margin。瀏覽器支持這些規范是有一定道理的，盡管這些屬性目前僅可以在Chrome、Opera和Safari看到效果，而且還需要帶上瀏覽器的私有屬性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。

shape-outside屬性將使用內容能繞著不規則幾何圖形排列，不在是中規中距的矩形。最初也可以讓內容在一個元素內呈現，比如幾何圖形是一個圓形，那么文本在這個圓形內呈現，文本也將呈現成一個圓圈形狀。然而這效果已經推遲到CSS Shapes Level 2中實現。

讓文本在一個幾何圖形內呈現，使用的是CSS Shapes中的shape-inside屬性。

shape-margin屬性用來設置使用了shape-outside的幾何圖形與環繞它文本之間的間距。

看上去非常強大，也很有意思，寫個實例來驗證一下前面所說的。

創建一個圖形

創建一個圓是CSS創建一個圖形(不是矩形)最簡單的。使用一個div來制作這個圓，并且在這個圓的邊上放置幾個段落p。

Lorem ipsum…

Lorem ipsum…

Lorem ipsum…

寫一點基本樣式，給.circle元素設置一個相同的width和height，使用border-radius將div變成一個圓，并且設置一個float，讓段落圍著這個元素。

.circle {

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

}

除了段落現在圍繞著該元素.circle之外，文本還是沒有變成曲線繞著圓形。那是由于border-radius屬性實際上并無法改變一個元素形狀，它依舊是一個矩形。

通過瀏覽器開發者工具(DevTools)的審查元素可以發現，事實上.circle仍然是一個盒子。即使這個div的外觀看上去是一個圓，但實際上它沒有元素看到的實際形狀。

為了讓段落呈現成一個圓形，實際上我們就需要通過shape-outside屬性改變元素的實際形狀。在本例中，將給shape-outside設置一個circle()屬性值。

.circle {

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

-webkit-shape-outside: circle();

shape-outside: circle();

}

這個時候，再使用開發者工具審查元素，不難發現元素正確渲染成一個圓。

添加一定的margin值，你可能看到的效果就像下面：

自定義圓

circle()函數可以定義圓的半徑和圓心位置：circle(r at x y)。默認情況，半徑值來源于元素容器大小，如果元素寬度是300px，那么圓的半徑就是其寬度的一半150px。

同樣，x和y坐標也是相對于元素尺寸。默認的坐標是50% 50%，也就是元素的正中間。

當你想保持元素實際的大小，形狀和位置，而又想調整形狀，這兩個值相當有用。以下面的示例中，將圓的半徑調整為60px，圓心坐標調整為30% 70%,相當于把圓調整到元素的左下角。

值得注意的是，當修改圓心坐標和半徑時必須顯式的定義，如果只添加其中的任何一個，都將是一個無效的值：

circle( 60px at 30% 70% ) // 正確寫法

circle( 60px ) // 無效寫法

circle( at 30% 70% ) // 無效寫法

圖形盒模型

CSS Shapes繼承了元素相同的盒模型，但應用元素以外的范圍。比如說，允許我們把元素的border-box設置為padding-box。改變圖形盒型只需要給shape-outside屬性上添加盒模型的關鍵字：content-box、margin-box、border-box或padding-box。

.circle {

width: 250px;

height: 250px;

background-color: #40a977;

border-radius: 50%;

float: left;

padding: 10px;

border: 20px solid #ccc;

margin: 30px;

-webkit-shape-outside: circle() padding-box;

shape-outside: circle() padding-box;

}

CSS Shapes默認的盒模型是margin-box。在下面的例子中，將CSS Shapes盒模型改為padding-box，告訴瀏覽器排除元素的margin和border值。這個時候看到的內容將繞著元素的padding外邊緣位置處。

如果你對CSS的盒模型不太了解的話，強列你閱讀一下這個教程，此教程詳細告訴了你CSS的盒模型是如何工作的。

創建更多的圖形

CSS Shapes規范還提供了幾個其他圖形函數：

ellipse()：顧名思義，這個函數將創建一個隨圓形狀。可以配置半徑和移動圓心坐標。和circle()函數不一樣，ellipse()函數可以接受兩個半徑，第一個是水平方向半徑，第二個是垂直方向半徑。因此可以這樣ellipse(100px 180px at 10% 20%)創建一個橢圓

polygon()：這個函數功能更強大，能夠創建更復雜的形狀，比如三角形、六邊形以及一些不規則的多邊形。使用polygon()并不像使用circle()函數創建一個圓那么簡單，但不需要過于擔心，可以使用多邊形轉換器這樣的工具可以很直觀的創建出不規則的多邊形形狀

總結

在這篇文章中，我們了解了CSS Shapes的基本的使用方法：創建一個形狀，定制其大小、位置和盒模型。在寫這篇文章的時候，CSS Shapes還有好多個方面都很粗糙，這也可能是為什么看不到CSS Shapes得到廣泛使用的原因之一。

正如本教程中前面所述，shape-inside允許將內容放置在一個圖形內

CSS Shapes規范提供了一個單獨的屬性shape-box用來定義CSS Shapes的盒模型，盡管現在還沒有得到任何瀏覽器的支持

在Safari瀏覽器中，一定需要添加-webkit前綴

然而，盡管進展緩慢，瀏覽器渲染還存在差異，但我們期待于CSS Shapes能早日到來。一旦主流瀏覽器真的支持CSS Shapes規范，那么就可以看到一些創造性的Web布局。

擴展閱讀

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css3 shapes是什么意思,如何在Web中使用CSS Shapes的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。