CSS3新特性

還好，由Opera和Safari領頭，更多的瀏覽器生產商已經開始支持CSS3的衆多特性了。Firefox 3.1即將發佈，它承諾跟進。然而，IE依然跟在後面。

到現在爲止，只有一些已經工作的特性，他們中的一些如下:

圓角

從web2.0開始，開始流行使用圓角，如果你不使用圓角，你的網站可能不會被列入web2.0網站。主要問題是，你至少需要4個圖片（每個角一個）和一些JS或複雜的層來實現圓角。

這些將成爲過去了！兩行就足夠了。讓我給你個例子：

HTML:

This is easy

css 代碼:

.round {
	background-color: #666;
	color: #fff;
	line-height: 20px;
	width: 200px;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

這裏是上面的截屏:

圓角

那麼，有什麼新東西？實際上CSS3的聲明是border-radius。 到目前爲止，這個特性尚未確定，衆多瀏覽器生產商通過前綴支持該屬性。Firefox使用 -moz- ， Safari使用 -webkit-

這裏同樣支持你選擇哪個角使用圓角，這可以通過使用“TopLeft TopRight BottomRight BottomLeft”實現。示例：

# -moz-border-radius-topleft / -webkit-border-top-left-radius

# -moz-border-radius-topright / -webkit-border-top-right-radius

如果可能你想要使用圓角功能，但是想要其它瀏覽器表現同樣的效果，看這裏。

邊框

另外一個令人興奮的CSS3新的border特性是支持border-image。這樣你就能爲每一個獨立的角和邊框定義一個圖片。

border-image:
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image
    border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

使用的圖片可以是這樣的：

邊框

border的另一個非常棒的特性是使用gradientcolors，而不是用圖片：

邊框顏色

CSS 代碼：

.bordercolor{
	border: 8px solid #000;
	-moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	-moz-border-top-colors:    #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	-moz-border-left-colors:   #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	-moz-border-right-colors:  #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	width:200px;
}

目前只有Firefox3支持這個特性，所以在Safari和Opera無法使用。

多欄

該特性使生活更加容易，呵呵。這個新特性允許網頁設計師將文字填入欄中。這可以通過兩種方法實現，定義各欄的寬度，或者是定義欄數。

多欄佈局目前只支持Mozilla核心的瀏覽器和Safari 3， 它們支持各自的屬性前綴 -moz-和-webkit-。下面的例子使用欄寬：

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

下一個例子使用欄數：

-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

這兩個例子輸出如下：

多欄

還有一個特性尚未生效，它就是“column-space-distribution”，這個屬性可以描述當頁面中還有剩餘空間時如何分配欄目之間的間距。