CSS 設計的發展大至可以分為 CSS1、CSS2 到 CSS3，以目前的網路環境來說，CSS1, CSS2 都已經屬於成熟型的網頁設計技術，而 CSS3 也發展得差不多完備，只是尚有許多好用的功能未獲得所有主流瀏覽器的支援，回過頭看，CSS1 早在西元 1994 年就開始推廣，到了西元1998年5月，W3C 發表了 CSS2，兩代間相隔約 4 年左右，而現在最新的 CSS3 是從西元 1999 年就開始制定，不過等到 2011 年才正式發佈，時間與前兩代的版本相差非常多年，CSS3 的變革主要在幾個部份，包含 border-radius、text-shadow、transform、transition 這些新功能，透過這些新功能，可以讓原本較為靜態的視覺效果，變成有許多動態或動畫特效。目前 CSS4 也已經開始發展中。
參考來源｜關於 CSS3 的淺談
CSS3教學網站｜
- Css3 Maker
- MDN Web Docs｜CSS3
- W3School｜CSS3教程
- w3big.com｜CSS3教程
【作業02|範例】加入CSS3效果
可參考上述網站，或以 Css3 Maker網站測試，適當加入語法並修改。
CSS3部分語法解析｜
- 圓角：border-radius: 20px; （上下左右圓角皆為20px）
- 圓角：border-radius: 10px 0 10px 0; （ 圖片圓角：上：10px；右：0px；下：10px；左：0px ）
- 區塊陰影：box-shadow:5px 5px 5px #000000;（區塊陰影：X(上下位移)：5px；Y(左右位移)：5px； 模糊度 5px；色彩 #000000）
- 作用：替一個區塊(div/block)增加陰影。
- 用法：box-shadow: x y blur spread color inset;
- 解釋：x = 上/下 (水平移動)。y = 左/右 (垂直移動)。blur = 模糊/清楚。spread = 分散/凝聚。color=顏色。inset = 內陰影
- 寫法：box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
- 文字陰影：text-shadow: 1px 1px 1px #000000;（文字陰影：X(上下位移)：1px；Y(左右位移)：1px； 模糊度 1px；色彩 #000000））
- 透明度： rgba(102,153,255,0.5)(不透明度50%，1為完全不透明，0為完全透明)
- RGBA是代表Red（红色） Green（綠色） Blue（藍色）和 Alpha，Alpha 0代表透明、1代表不透明，請自行改變數值）
- 透明度：opacity: 0.5;（設定的元素有50%的透明度，請自行放入適當位置並改變數值）
- 線性漸層：background:linear-gradient(#B8E7F3,#43C3E4);（從上 #B8E7F3 漸層到下 #43C3E4）
- 線性漸層：background:linear-gradient(rgba(123,219,241,0.8),rgba(0,91,112,0.8));（漸層背景色加不透明度80%*）
- 放射漸層：background:radial-gradient(#B8E7F3,#43C3E4);
- 漸層語法:http://mepopedia.com/forum/read.php?844,17157
CSS animation
只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。
- 設定 CSS 動畫。
- 使用 @keyframes 設定動畫關鍵影格。
- animation-duration：設定整個動畫播放一次的時間長度。
- animation-name：設定 @keyframes at-rule 所使用的動畫名稱。
- 在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式，0% 代表動畫一開始播放的起始點，而 100% 則代表動畫的結尾
若於練習中加入h1滑入的動畫，可加入以下CSS語法練習：
【作業02|動畫參考】
延伸參考： 使用 CSS Animation 製作網頁上的動畫（只要 CSS3，不用 JavaScript！）
延伸參考： CSS 動畫
