CSS 3 報告人：Sean Huang 日期：2014/11/27

大綱 CSS3 課程概述 CSS3 概述 CSS3 新特性 參考資料

課程概述 本課程需先了解基本的CSS知識 本課程以介紹CSS 3 所新增的屬性為主 課堂實作練習

CSS3是什麼 瀏覽器支持 瀏覽器支持度 - 哆啦A夢 CSS3 概述

1：CSS3是什麼 CSS3 分成了不同類別，稱為「modules」。 而每一個「modules」都有於 CSS2 中額外增加的功能 ，以及向後相容。 CSS3 早於1999年已開始制訂。 直到2011年6月7日， CSS 3 Color Module 終於發布為 W3C Recommendation。 CSS3只是表示下一代CSS，3只是版本號，css3在css2.1 版本上加入了一些新特性

2：瀏覽器支持 可以輸入屬性,該網站會幫你過慮是否能使用. (關鍵字 : css3 browser support 2014) CSS3 Browser Support Reference W3C 所制作的比較列表 Can I use (關鍵字 : css3 browser support 2014)

3：哆啦A夢

CSS3 新特性 簡介 邊框 背景 漸變 文本效果 字體 2D 轉換 3D 轉換 過渡 動畫 多列 多欄佈局 用戶界面 選擇器 媒體查詢（Media Queries） CSS3 新特性

1：簡介 CSS3把很多以前需要使用圖片和script來實現的效果，只需要 短短幾行程式就能搞定。 CSS3 被劃分為Modules。其中最重要的包括： Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

2：邊框 通過 CSS3，能夠畫出圓角邊框，將矩形添加陰影，或使 用圖片來繪制邊框 – 而且不需使用設計軟體 border-radius box-shadow border-image

2：邊框 -邊框圓角 在 CSS2 中添加圓角矩形需要技巧。必須為每個圓角使用不同的圖 片。 在 CSS3 中，繪出圓角是非常容易的。 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ }

2：邊框 -邊框陰影 box-shadow 用於向方框添加陰影。 div { box-shadow: 10px 10px 5px #888888; }

2：邊框 -邊框圖片 border-image 屬性，使用圖片來創建邊框。 div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; -o-border-image:url(border.png) 30 30 round; } 原始圖片

3：背景 - background-size 屬性規定背景圖片的尺寸。 在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中 重復使用背景圖片。 您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那麼尺 寸相對於父元素的寬度和高度。 div { background: url(img_flwr.gif); background-size: 80px 60px; background-repeat: no-repeat; }

3：背景 - background-origin 規定背景圖片的定位區域。 背景圖片可以放置於 content-box、padding-box 或 border-box 區域。

3：背景 -多重背景圖片 CSS3 允許您為元素使用多個背景圖像。 body { background-image:url(img_tree.gif), url(img_flwr.gif); } + =

4：漸變 CSS3漸變可顯示兩個或多個指定的顏色之間的平滑漸變。 在CSS3之前，必需使用圖片達成，現在使用CSS3不僅能減少下載頻 寬，更可以在元素被放大時，不會失真。 #grad1 { height: 200px; background: linear-gradient(to bottom right, red , blue); }

5：文本效果 CSS3 包含多個新的文本特性。 text-shadow word-wrap text-shadow: 5px 5px 5px #FF0000; word-wrap p {word-wrap:break-word;}

6：字體 CSS3 @font-face 規則 在 CSS3 之前，設計師必須使用已在用戶電腦上安裝好的字體。 當找到或購買到希望使用的字體時，可將該字體文件存放到Server上，它會在需 要時被自動下載到用戶的電腦上。 Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。 Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。 <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>

7：2D 轉換 對元素進行移動、縮放、轉動、拉長或拉伸 使元素改變形狀、尺寸和位置的一種效果。 2D 轉換方法： translate() rotate() scale() skew() matrix()

7：2D 轉換 2D 轉換方法： transform: rotate(30deg); 通過 translate() 方法，元素根據給定的 left（x 坐標） 和 top（y 坐標） 位置參 數移動 transform: translate(50px,100px); 通過 rotate() 方法，元素順時針旋轉給定的角度。負值，元素將逆時針旋轉。 transform: rotate(30deg);

7：2D 轉換 2D 轉換方法： transform: skew(30deg,20deg); 通過 scale() 方法，根據給定的寬度（X 軸）和高度（Y 軸）參數，元素的尺寸會 增加或減少 transform: scale(2,4); 通過 skew() 方法，根據給定的水平線（X 軸）和垂直線（Y 軸）參數翻轉角度 transform: skew(30deg,20deg);

7：2D 轉換 2D 轉換方法： transform: matrix(0.866,0.5,-0.5,0.866,0,0); matrix() 方法把所有 2D 轉換方法組合在一起。 matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾 斜元素。 transform: matrix(0.866,0.5,-0.5,0.866,0,0);

8：3D 轉換 使用 3D 轉換來對元素進行格式化。 3D 轉換方法： rotateX() transform: rotateX(120deg) rotateY() transform: rotateY(130deg);

9：過渡 通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下， 當元素從一種樣式變換為另一種樣式時為元素添加效果 CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。 要實現必須規定兩項內容： 規定希望把效果添加到哪個 CSS 屬性上 規定效果的時間長度

9：過渡 通應用於寬度屬性的過渡效果，時長為 2 秒： 規定當鼠標指針懸浮於 <div> 元素上時： width:300px; { transition: width 2s; } (如果時長未規定，則不會有過渡效果，因為預設值是 0。) 規定當鼠標指針懸浮於 <div> 元素上時： div:hover width:300px;

10：動畫 通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片 、Flash 動畫以及 JavaScript。 @keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。 當在 @keyframes 中創建動畫時，需把它捆綁到某個選擇器，否則 不會產生動畫效果。 通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器 規定動畫的名稱 規定動畫的時長

10：動畫 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。 使用者可以改變任意多的樣式和任意多的次數。 使用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，這等同於 0% 和 100%。 0% 是動畫的開始，100% 是動畫的完成。 為了得到最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。

10：動畫 @keyframes myfirst 把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒 { } div from {background: red;} to {background: yellow;} } 把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒 div animation: myfirst 5s;

11：多列 創建多個列來對文本進行布局 EX: 報紙 column-count  屬性規定元素應該被分隔的列數 色規則

11：多列 創建多個列來對文本進行布局 EX: 報紙 column-gap 屬性規定列之間的間隔

11：多列 創建多個列來對文本進行布局 EX: 報紙 column-rule 屬性設置列之間的寬度、樣式和顏色規則

12：用戶界面 在 CSS3 中，新的用戶界面特性包括使用者可以: resize 重設元素尺寸 (屬性規定是否可由用戶調整元素尺寸) box-sizing 重設盒 (允許以確切的方式定義適應某個區域的具體內容) outline-offset 重設輪廓(對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓)

13：選擇器 element1~element2 Selector [att^="value"] 匹配屬性包含以特定的值開頭的元素 設定一個背景顏色給所有在<p>之下的<ul> (只要parent是<p>) p ~ ul { background: #ff0000; } [att^="value"] 匹配屬性包含以特定的值開頭的元素 [att$="value"] 匹配屬性包含以特定的值結尾的元素 [att*=「value」] 匹配屬性包含含有特定的值的元素

13：選擇器 :checked 選擇所有<input>為checked的元素 :disabled 選擇所有<input>為disabled的元素 :empty 選擇所有不包函子元素的<p>元素(包括text節點) :enabled 選擇所有<input>為enabled的元素 :first-of-type 選擇在某個父節點之下的第一個<p>元素 :in-range 選擇有範圍選擇效果的<input>元素 :invalid 選擇所有有invalid value的<input>元素 :last-child 選擇所有在某個父節點之下的最後一個子節點元素 :last-of-type 選擇所有在某個父節點之下的最後一個子節點<p>元素

13：選擇器 :not(selector) 想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素 :nth-child(n) 直接匹配第number個元素。參數number必須為大於0的整數 :nth-last-child(n) 與上個選擇器的思想同樣，但是從後面匹配元素 :nth-last-of-type(n) 選擇所有在某個父節點之下的第二個<p>(從最後一個子節點開始數) :only-of-type 選擇在某個父節點之下的唯一<p> :only-child 選擇在某個父節點之下的唯一節點 :optional 選擇沒有"required"屬性的<input> :out-of-range 選擇輸入值超過範圍的元素

13：選擇器 :read-only 選擇有readonly屬性的元素 :read-write 選擇沒有readonly屬性的元素 :required 選擇有"required"屬性的<input> :root 選擇頁面的根元素 ::selection 選擇使用者所選擇的範圍的一部份 :valid 選擇所有有驗證值的<input>

14：媒體查詢（Media Queries） Media Queries 要在可以使用CSS3 的瀏覽器中才能作用，因此IE8 以下不支援 Media Queries 是 Responsive Web Design實作常用的方法 較佳的開發步驟： 先寫一份在你的螢幕顯示沒什麼問題的 CSS 樣式。 開始使用 Media Queries 在不同裝置上做調整。 Media Queries 有兩種使用方法 在同一個 CSS 檔案中，用 Media Queries @media 來判斷使用者之螢幕寬度， 選擇載入哪一段 CSS。 在 HTML 的 載入的地方，用 media 屬性判斷使用者之裝置 / 視窗寬度，選擇載 入哪一個 CSS 檔案。 Example: w3school example

參考資料

CSS 3 新增的屬性列表 backface-visibility background-clip background-origin background-size border-bottom-left-radius border-bottom-right-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-radius border-top-left-radius border-top-right-radius box-shadow box-sizing column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns @font-face

CSS 3 新增的屬性列表 font-size-adjust font-stretch hanging-punctuation icon @keyframes @media nav-down nav-index nav-left nav-right nav-up opacity perspective perspective-origin resize text-justify text-overflow text-shadow transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function word-break word-wrap

參考網址 http://fundesigner.net/css3-media-queries/ https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path http://sarasoueidan.com/blog/css-svg-clipping/ http://stackoverflow.com/questions/21904672/internet-explorer-and-clip-path http://boohover.pixnet.net/blog http://blog.edenyeh.com/web/css3-mask/ http://abgne.tw/css/apply-css3/css3-draw-cloud.html http://abgne.tw/css/apply-css3/css3-draw-heart-icon.html http://abgne.tw/css/apply-css3/css3-draw-taichi-icon.html http://blog.wu-boy.com/2011/04/css-3-%E5%9C%93%E8%A7%92-border-radius- %E4%BB%8B%E7%B4%B9/ http://border-radius.com/ http://css3generator.com/ http://cssslider.com/ 42

參考網址 http://csswarp.eleqtriq.com/ http://km.nicetypo.com/doc/8e05688fa1edd0e02127cc39414edd67 http://tools.webdirections.org/#gradients http://ux.sohu.com/topics/505fcb7388ba205052011a65 http://www.cnblogs.com/lhb25/p/css-and-css3-shapes.html http://www.css3-html5.com/DivCSS/20110408663.html http://www.dfuns.idv.tw/teaching_css3.html http://www.sharejs.com/code/button/css3-button2/index.html https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator 43

Q&A