在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. <imgsrc="megan.jpg"style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px10px5px#888;"/>

上面的代碼中，transform CSS 屬性實現圖片旋轉，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉的角度，或者是陰影的參數，僅僅調整那些參數就OK了。嘗試一下，你將看到下面演示的旋轉圖片效果。box-shadow可以設置6個參數：<length>①：第1個長度值用來設置對象的陰影水平偏移值?？梢詾樨撝?lt;length>②：第2個長度值用來設置對象的陰影垂直偏移值?？梢詾樨撝?lt;length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值<length>④：如果提供了第4個長度值則用來設置對象的陰影外延值。不允許負值<color>：設置對象的陰影的顏色。inset：設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影4.元素變換剛才我們在陰影介紹中提到transform的使用，下面我們在來看一個例子，鼠標滑過圖片放大：

1. <imgsrc="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度

下節我們一起探討動畫（transition）和漸變（gradient）的使用