CSS3 多列
通過 CSS3,您能夠創建多個列來對文本進行布局 - 就像報紙那樣!
在本章中,您將學習如下多列屬性:
column-count
column-gap
column-rule
瀏覽器支持
屬性 瀏覽器支持
column-count
column-gap
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 用戶界面
- 在 CSS3 中,新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。
- 03-20 關注:0
- CSS3 多列
- 通過 CSS3,您能夠創建多個列來對文本進行布局 - 就像報紙那樣!
- 03-20 關注:0
- CSS3 動畫
- 通過 CSS3,我們能夠創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
- 03-20 關注:1
- CSS3 過渡
- 通過 CSS3,我們可以在不使用 Flash 動畫或 JavaScript 的情況下,當元素從一種樣式變換為另一種樣式時為元素添加效果。
- 03-20 關注:1
- CSS3 2D 轉換
- 通過 CSS3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
- 03-20 關注:0
- CSS3 字體
- 在 CSS3 之前,web 設計師必須使用已在用戶計算機上安裝好的字體。
- 03-20 關注:1
- CSS3 文本效果
- Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。
- 03-20 關注:1