Hello！小夥伴們，我們上一篇文章的CSS3教學-動畫知識大家有沒有消化完呢？ CSS3中新出現的多列版面(multi-column)是傳統HTML網頁中塊狀版面模式的強大擴充。這種新語法能夠讓WEB前端開發人員輕鬆的讓文字呈現多列顯示。
CSS3 多列：
透過 CSS3，您能夠建立多個列來對文字進行佈局 – 就像報紙一樣！
在本章中，您將學習如下多列屬性：
1、column-count；
2、column-gap；
3、column-rule。
瀏覽器支援：
Internet Explorer 10 和 Opera 支援多列屬性。
Firefox 需要前綴 -moz-。
Chrome 和 Safari 需要前綴 -webkit-。
註解：Internet Explorer 9 以及更早的版本不支援多列屬性。
CSS3 建立多列：
column-count 屬性規定元素應該被分隔的列數：
實例：
把div 元素中的文字分隔為三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}CSS3 規定列之間的間隔：
column-gap 屬性規定列之間的間隔：
實例：
規定列之間40 像素的間隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}CSS3 列規則：
column-rule 屬性設定列之間的寬度、樣式和樣式顏色規則。
實例：
規定列之間的寬度、樣式和顏色規則：
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}新的多列屬性：
下面的表格列出了所有的轉換屬性：
多列的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
