css3 shapes是什么意思,如何在Web中使用CSS Shapes
布局一般都是遵循按行和列等線性原則，Web網(wǎng)站的布局到今天為止很大程度上受到這些原則的影響。雖然CSS Grid的出現(xiàn)讓布局變得更好，更靈活，但相對于印刷媒體而言，Web布局總體上還是受到很好的限制，特別是內(nèi)容流上。
雜志和報紙一直有很好的辦法來安排內(nèi)容。比如文本繞著非矩形排列。
直到目前為止，Web上的布局都局限于規(guī)則矩形排列，無法讓內(nèi)容流實現(xiàn)非矩形布局。
接下來讓我們一起探討如何使用CSS Shapes模塊讓W(xué)eb布局能像雜志和報紙一樣讓文本內(nèi)容實現(xiàn)不規(guī)則矩形排列。
CSS Shapes簡介
CSS Shapes使網(wǎng)頁設(shè)計師能更好的實現(xiàn)自己的創(chuàng)意，除了簡單的長方形和正方形，還可以實現(xiàn)任何幾何圖形布局。改規(guī)范提供了兩個新的CSS屬性：shape-outside和shape-margin。瀏覽器支持這些規(guī)范是有一定道理的，盡管這些屬性目前僅可以在Chrome、Opera和Safari看到效果，而且還需要帶上瀏覽器的私有屬性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。
shape-outside屬性將使用內(nèi)容能繞著不規(guī)則幾何圖形排列，不在是中規(guī)中距的矩形。最初也可以讓內(nèi)容在一個元素內(nèi)呈現(xiàn)，比如幾何圖形是一個圓形，那么文本在這個圓形內(nèi)呈現(xiàn)，文本也將呈現(xiàn)成一個圓圈形狀。然而這效果已經(jīng)推遲到CSS Shapes Level 2中實現(xiàn)。
讓文本在一個幾何圖形內(nèi)呈現(xiàn)，使用的是CSS Shapes中的shape-inside屬性。
shape-margin屬性用來設(shè)置使用了shape-outside的幾何圖形與環(huán)繞它文本之間的間距。
看上去非常強大，也很有意思，寫個實例來驗證一下前面所說的。
創(chuàng)建一個圖形
創(chuàng)建一個圓是CSS創(chuàng)建一個圖形(不是矩形)最簡單的。使用一個div來制作這個圓，并且在這個圓的邊上放置幾個段落p。
Lorem ipsum…
Lorem ipsum…
Lorem ipsum…
寫一點基本樣式，給.circle元素設(shè)置一個相同的width和height，使用border-radius將div變成一個圓，并且設(shè)置一個float，讓段落圍著這個元素。
.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
}
除了段落現(xiàn)在圍繞著該元素.circle之外，文本還是沒有變成曲線繞著圓形。那是由于border-radius屬性實際上并無法改變一個元素形狀，它依舊是一個矩形。
通過瀏覽器開發(fā)者工具(DevTools)的審查元素可以發(fā)現(xiàn)，事實上.circle仍然是一個盒子。即使這個div的外觀看上去是一個圓，但實際上它沒有元素看到的實際形狀。
為了讓段落呈現(xiàn)成一個圓形，實際上我們就需要通過shape-outside屬性改變元素的實際形狀。在本例中，將給shape-outside設(shè)置一個circle()屬性值。
.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
-webkit-shape-outside: circle();
shape-outside: circle();
}
這個時候，再使用開發(fā)者工具審查元素，不難發(fā)現(xiàn)元素正確渲染成一個圓。
添加一定的margin值，你可能看到的效果就像下面：
自定義圓
circle()函數(shù)可以定義圓的半徑和圓心位置：circle(r at x y)。默認情況，半徑值來源于元素容器大小，如果元素寬度是300px，那么圓的半徑就是其寬度的一半150px。
同樣，x和y坐標也是相對于元素尺寸。默認的坐標是50% 50%，也就是元素的正中間。
當你想保持元素實際的大小，形狀和位置，而又想調(diào)整形狀，這兩個值相當有用。以下面的示例中，將圓的半徑調(diào)整為60px，圓心坐標調(diào)整為30% 70%,相當于把圓調(diào)整到元素的左下角。
值得注意的是，當修改圓心坐標和半徑時必須顯式的定義，如果只添加其中的任何一個，都將是一個無效的值：
circle( 60px at 30% 70% ) // 正確寫法
circle( 60px ) // 無效寫法
circle( at 30% 70% ) // 無效寫法
圖形盒模型
CSS Shapes繼承了元素相同的盒模型，但應(yīng)用元素以外的范圍。比如說，允許我們把元素的border-box設(shè)置為padding-box。改變圖形盒型只需要給shape-outside屬性上添加盒模型的關(guān)鍵字：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值。這個時候看到的內(nèi)容將繞著元素的padding外邊緣位置處。
如果你對CSS的盒模型不太了解的話，強列你閱讀一下這個教程，此教程詳細告訴了你CSS的盒模型是如何工作的。
創(chuàng)建更多的圖形
CSS Shapes規(guī)范還提供了幾個其他圖形函數(shù)：
ellipse()：顧名思義，這個函數(shù)將創(chuàng)建一個隨圓形狀。可以配置半徑和移動圓心坐標。和circle()函數(shù)不一樣，ellipse()函數(shù)可以接受兩個半徑，第一個是水平方向半徑，第二個是垂直方向半徑。因此可以這樣ellipse(100px 180px at 10% 20%)創(chuàng)建一個橢圓
polygon()：這個函數(shù)功能更強大，能夠創(chuàng)建更復(fù)雜的形狀，比如三角形、六邊形以及一些不規(guī)則的多邊形。使用polygon()并不像使用circle()函數(shù)創(chuàng)建一個圓那么簡單，但不需要過于擔心，可以使用多邊形轉(zhuǎn)換器這樣的工具可以很直觀的創(chuàng)建出不規(guī)則的多邊形形狀
總結(jié)
在這篇文章中，我們了解了CSS Shapes的基本的使用方法：創(chuàng)建一個形狀，定制其大小、位置和盒模型。在寫這篇文章的時候，CSS Shapes還有好多個方面都很粗糙，這也可能是為什么看不到CSS Shapes得到廣泛使用的原因之一。
正如本教程中前面所述，shape-inside允許將內(nèi)容放置在一個圖形內(nèi)
CSS Shapes規(guī)范提供了一個單獨的屬性shape-box用來定義CSS Shapes的盒模型，盡管現(xiàn)在還沒有得到任何瀏覽器的支持
在Safari瀏覽器中，一定需要添加-webkit前綴
然而，盡管進展緩慢，瀏覽器渲染還存在差異，但我們期待于CSS Shapes能早日到來。一旦主流瀏覽器真的支持CSS Shapes規(guī)范，那么就可以看到一些創(chuàng)造性的Web布局。
擴展閱讀
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的css3 shapes是什么意思,如何在Web中使用CSS Shapes的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中scale_Python中
- 下一篇： oracle 表 上限,Oracle分区