IT兄弟連 HTML5教程 CSS3揭祕 CSS3屬性4

 

7  多列布局屬性

經過CSS3，開發人員可以建立多列來對文本進行佈局。在CSS2時代，對於多列布局的設計，大多采用浮動佈局和絕對定位佈局兩種方式。浮動佈局比較靈活，可是須要編寫大量的附加樣式代碼，並且在網頁縮放等操做下容易發生錯位，影響網頁總體效果。絕對定位方式要精確到標籤的位置，但固定標籤位置的方式沒法知足標籤的自適應能力，也影響文檔流的聯動。CSS3新增了columns屬性，即多列自動佈局功能，利用該功能能夠自動將內容按指定的列數排列（例如，columns: 250px 3，250px表示的是列寬，3表示的是多列的數目）。能夠結合column-gap屬性定義列之間的間距，結合column-rule屬性定義每列之間邊框的寬度、樣式和顏色。應用示例代碼以下所示：

CSS3多列布局還有不少新屬性和特性，如欄目高度（column-fill）屬性及分列打印等，這裏就再也不詳述了。

 

8  漸變屬性

對於正常的漸變背景，通常都是切絲而後平鋪，至因而橫向平鋪仍是縱向平鋪要視實際狀況而定，複雜一些的背景就只能切塊圖。然而CSS3可讓Firefox、Safari、Chrome實現顏色漸變，IE能夠用濾鏡，這也是一種值得考慮的方法。先看語法：

屬性「-moz-linear-gradient」有3個參數。第一個參數表示線性漸變的方向，top表示從上到下，left表示從左到右，若是定義成left top，那就表示從左上角到右下角。第二個和第三個參數分別表示起點顏色和終點顏色。還能夠在它們之間插入更多的參數，表示多種顏色的漸變。

屬性「-webkit-gradient」是WebKit引擎對漸變的實現，共有5個參數。第一個參數表示漸變類型（type），能夠是linear（線性漸變）或者radial（輻射漸變）。第二個和第三個參數都是一對值，分別表示漸變起點和漸變終點。這對值能夠用座標形式表示，也能夠用關鍵值表示，好比left top（左上角）和left bottom（左下角）。第四個和第五個參數分別是兩個color-stop函數。color-stop函數接受兩個參數，第一個參數表示漸變的位置，0爲起點，0.5爲中點，1爲結束點；第二個參數表示該點的顏色。

IE依靠濾鏡實現漸變。startColorstr表示起點的顏色，endColorstr表示終點的顏色。GradientType表示漸變類型，0爲默認值，表示垂直漸變；1表示水平漸變。