一、css3新增屬性概述
在此前我們講解的css課程中，課程內容是以css2版本為基礎的，本章開始我們講解css3版本的新特性。
在css2的時代，由於css的功能侷限性，我們製作的很多網頁效果都是利用一些取巧的方法，例如實現一個圓角的頁面，我們需要把圓角的部分用圖片代替，而製作動畫效果，都需要使用JavaScript來完成的，這不僅增加了程式碼編寫的難度，還降低了web開發人員的工作效率。
在css3中我們可以使用大量新增的屬性，例如圓角，陰影，動畫，形變等等，這讓web開發便得更加簡單。
透過border-radius屬性，我們可以為一個元素設定圓角，程式碼如下所示。
在上面的程式碼中，我們為一個寬度和高度都是200px的div設定了一個圓角效果，border-radius的值是圓角的半徑。
我們可以將圓角的半徑設定為50%，這樣一個正方形的div元素就變成了一個圓形，如果是長方形的元素，就會變成橢圓形。
可以使用四個值分別指定元素四個角的圓角半徑，程式碼如下所示。
透過上面的程式碼，可以直觀地看出，圓角設定的四個值分別對應的是左上，右上，右下，左下。
透過box-shadow屬性，我們可以設定元素的陰影，程式碼如下所示。
從上面的程式碼我們可以看到box-shadow屬性可以設定四個值，第一個值是陰影x軸的長度，第二個值是陰影y軸的長度，第三個值是陰影的模糊半徑，第四個值是陰影的顏色。
css3提供了讓元素形變的屬性(transform)，在transform後面新增不同的形變函式，就能實現不同的形變效果，常用的形變包括：旋轉、縮放、位移；
透過rotate()函式可以實現元素形變的效果，示例程式碼如下所示。
在上面的程式碼中，我們透過rotate函式讓元素順時針旋轉了45度（deg單位表示度）。我們也可以設定負的度數，例如：
上面的程式碼可以讓元素逆時針旋轉45度。
透過scale()函式可以實現元素的縮放，示例程式碼如下所示。
我們可以在scale函式中設定元素縮放的比例，1.5就是原基礎之上1.5倍，原寬高是200px，縮放之後呈現出來的尺寸就是300px。
透過translate()函式可以實現元素的位移，示例程式碼如下所示。
在translate()函式中，我們可以設定元素位移的x軸距離和y軸偏移量。
我們可以利用位移，將元素放置在頁面水平和垂直居中的位置，程式碼如下所示
這樣透過絕對定位，配合位移，就可以將元素放置在水平和垂直都居中的位置上了。
按要求完成案例，要求如下
【融職教育】在工作中學習，在學習中工作