css3中新增的樣式使用方法

在PC版開發中由於IE原因，我們很少用到css3，但隨著平板和智能手機進入我們的生活，以及現在越來越流行，在手機版和平板版開發中我們就可以大膽的使用了，下麵我們探討常用幾個css3屬性： 

1.css3首碼使用介紹，我們直接看個例子： 

1. -webkit-transform:rotate(-3deg); // 給Chrome和Safari等webkit內核的瀏覽器使用   
2. -moz-transform:rotate(-3deg);    // 給Firefox瀏覽器使用   
3. -ms-transform:rotate(-3deg);     // 給IE瀏覽器使用   
4. -o-transform:rotate(-3deg);      // 給Opera瀏覽器使用   
5. transform:rotate(-3deg);         // 給支持css3瀏覽器使用   

2.在學習css3屬性時第一個肯定會想到圓角，因為css2中要切一張張小圖拼接還要大量css代碼控制還要考慮相容很麻煩但是到css3後只要這個屬性”border-radius”就能實現圓角，來看一個簡單例子：

1. border-radius:5px;          //設置4個角且圓角半徑長度為5px;  
2. border-top-left-radius:5px; //設置上左第一個角且圓角半徑長度為5px;其他使用我們可以參考手冊，用起來很簡單  

3.簡單的陰影 
    讓我們從向你展示為網頁中的任意元素添加陰影效果是多麼的簡單開始吧。下麵的代碼片段將演示一個輕微旋轉並有陰影的圖片，這兩個效果都是使用CSS添加的。 

1. <img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />   

上面的代碼中，transform CSS 屬性實現圖片旋轉，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉的角度，或者是陰影的參數，僅僅調整那些參數就OK了。 

嘗試一下，你將看到下麵演示的旋轉圖片效果。 

 

box-shadow可以設置6個參數： 
<length>①：第1個長度值用來設置對象的陰影水平偏移值。可以為負值 
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 
<length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值 
<length>④：如果提供了第4個長度值則用來設置對象的陰影外延值。不允許負值 
<color>：設置對象的陰影的顏色。 
inset：設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影 

4.元素變換 
剛纔我們在陰影介紹中提到transform的使用，下麵我們在來看一個例子，滑鼠滑過圖片放大： 

1. <img src="megan.jpg" />   
2. <style>  
3.  img { -webkit-transform: scale(0.5); }  
4.  img:hover { -webkit-transform: scale(1); }  
5. </style>  

滑鼠滑過圖片，它就會彈出並變大，如下所示。 
 
將滑鼠從圖片上挪開，圖片又會恢複原狀。 
 
我們來看一下transform各各參數意思： 

1. transform:translate(10px,10px) //該元素水平和垂直各移動10個像素  
2. transform:rotate(10deg)        //該元素旋轉10度  
3. transform:scale(2)             //該元素放大兩倍  
4. transform:skew(10deg,10deg)    //該元素對應X軸和Y軸斜切扭曲10度