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

 

經過CSS選擇器找到元素，就要使用CSS屬性給找到的元素設置樣式。儘管如今的瀏覽器已經支持了衆多的CSS3屬性，但做爲初學者，最應該關注的就是一些「主流」的屬性，如border-radius、box-shadow、transform等。它們有良好的文檔、極佳的測試效果而且常常用到，將成爲你設計網站的得力助手。學習CSS3的屬性就要先從主流的屬性開始，其餘屬性則可經過CSS3手冊得到幫助。具體實例展現，讀者能夠在下一章大量學習。本節主要學習CSS3屬性的用法及兼容性。

 

1  使用CSS3屬性前的準備

雖然目前主流的瀏覽器大多不支持CSS3的大多數屬性，但仍是鼓勵讀者在前端開發中要學會而且運用這些CSS3屬性，由於這是將來的發展趨勢。關鍵是首先要肯定你是否對各個瀏覽器之間的細微差異有所瞭解，你能確定地說IE顯示的90°角就不圓滑嗎？這取決於你的決定。可是要永遠記住，網站設計沒必要看到全部瀏覽器的不一樣。在使用CSS3的一些高級特性時，需指定全部瀏覽器的前綴。CSS3的前綴是一家瀏覽器生產商常常使用的一種方式，它暗示該CSS屬性或規則還沒有成爲W3C標準的一部分。CSS3前綴的瀏覽器屬性規則如表1所示。

表1  CSS3前綴的瀏覽器屬性規則

 

   

 

 

既然CSS3代碼中（暫時）須要寫上這麼多前綴，就須要注意順序問題，要先寫私有的CSS3屬性，再寫標準的CSS3屬性。若是之後當一個屬性成爲標準，而且被Firefox、Chrome等瀏覽器的最新版廣泛兼容的時候，就能夠去除這些前綴了。

 

2  邊框屬性

經過CSS3，用戶可以建立圓角邊框，向矩形添加陰影，使用圖片來繪製邊框。圓角實現是衆多CSS3屬性中最受歡迎的一種，它經過border-radius屬性來實現，是CSS3中級別最高的一個屬性。radius就是半徑的意思，用這個屬性既能夠很容易地作出圓角效果，也能夠作出圓形效果。原理很簡單，「正方形的內切圓的半徑等於正方形邊長的一半」。邊框屬性的使用格式以下：

能夠經過box-shadow屬性向邊框添加一個或多個陰影，這也是開發時經常使用的效果。使用示例以下所示：

box-shadow屬性是由逗號分隔的陰影列表，每一個陰影由2～4個長度值、可選的顏色值及可選的inset關鍵詞來規定，省略長度的值是0。該屬性可用值以下。

Ø　none：無陰影。

Ø　<length>①：第1個長度值，用來設置對象的陰影水平偏移值。能夠爲負值。

Ø　<length>②：第2個長度值，用來設置對象的陰影垂直偏移值。能夠爲負值。

Ø　<length>③：若是提供了第3個長度值，則用來設置對象的陰影模糊值。不容許爲負值。

Ø　<length>④：若是提供了第4個長度值，則用來設置對象的陰影外延值。能夠爲負值。

Ø　<color>：設置對象的陰影的顏色。

Ø　inset：設置對象的陰影類型爲內陰影。該值爲空時，對象的陰影類型爲外陰影。

此屬性還能夠設置多組值，中間用「,」隔開。另外，經過CSS3的border-image屬性，還可使用圖片來建立邊框。