<div style="border:1px blue solid;padding:0px;">
這是 DIV 區塊內的文字，padding 設為 0px。
</div>
<div style="border:1px blue solid;padding:10px;">
這是 DIV 區塊內的文字，padding 設為 10px。
</div>
<div style="border:1px blue solid;padding:20px;">
這是 DIV 區塊內的文字，padding 設為 20px。
</div>

這是 DIV 區塊內的文字，padding 設為 0px。

這是 DIV 區塊內的文字，padding 設為 10px。

這是 DIV 區塊內的文字，padding 設為 20px。

CSS DIV 背景圖片的設計需要用到 background-image 屬性，這是一個用來設計網頁元素背景圖片的標準語法，用途是將預先準備好的圖片，插入到網頁本身或網頁元素之中，使用上較 background-color 單純的背景顏色稍微複雜，卻可以創造出更豐富、更精緻的網頁 DIV 背景圖片效果，如果網頁的風格需要 DIV 背景圖片的襯托來提升整體視覺感受，可以閱讀這篇所提供的 CSS DIV 背景圖片範例。

為了避免誤會，這裡先說明 background-image 這個屬性，只能用來插入背景圖片，並非設計背景圖片的功能，要設計圖片，必須用繪圖軟體如 Photoshop、GIMP、illustrator、小畫家 ... 這類的繪圖軟體來設計。回到正題繼續看如何用 background-image 插入 DIV 背景圖片。

CSS DIV 背景圖片範例 範例呈現效果 第一段所提到的關於 background-image 設計 DIV 背景圖片會比 background-color 設計背景顏色稍微複雜一點的地方，就在要在 DIV 使用背景圖片，通常會需要設計 DIV 的寬度與高度，像範例中這樣替 DIV 區塊加入寬度（width:600px;）與高度（height:400px;）的屬性，目的是讓背景圖片的尺寸能與 DIV 本身的尺寸相吻合，關於 DIV 尺寸的設計規則，請參閱：CSS DIV 寬度與高度的設定。

範例中的 border 僅是用來設計邊框用的，與 DIV 背景圖片無關，詳細說明：CSS border 邊框。

CSS DIV 背景圖片只有這麼簡單嗎？當然不只，CSS 考量到不同的網頁風格會有不同的背景圖片呈現需求，例如背景圖片是否要跟著滑鼠的上下滑動而移動，或者是背景圖片要固定在哪個位置，左上角還是右下角？這幾篇可以幫您解答這些問題。
覺得 DIV 背景圖片太麻煩？其實直接使用背景顏色也可以設計得很美，看這篇：CSS DIV 背景顏色。

CSS background-position 用來定義背景圖片位置，是 CSS background 的屬性之一，常與 background-image、background-repeat 搭配設計，讓網頁背景圖片靠上、下、左、右甚至是置中顯示，設計時需使用水平與垂直方向的位置，可以給數字、百分比或方向參數，讓圖片能夠在正確的位置呈 現，background-position 是標準的 CSS 背景位置設計方法，所有的主流瀏覽器都支援 background-position。

CSS background-position 基本語法 通常使用水平方向以及垂直方向的組合來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊，除此之外，還可以使用「靠左與靠上的距離」以及「靠左與靠上的百分比」來設計，範例還會詳細說明。

可以使用的方向參數

方向	參數
水平方向	left - 靠左對齊、center - 置中對齊、right - 靠右對齊
垂直方向	top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊

CSS background-position 範例一、各種對齊方式 以上範例要確保正確顯示，需搭配 background-repeat:no-repeat 告訴瀏覽器背景圖片不要重覆顯示。特別要注意的是，如果使用了簡化寫法，只寫一個屬性值，另一個屬性值將會自動取中間值，為了將來管理方便，建議兩個方向的屬性值都寫上去比較好。

CSS background-position 範例二、垂直置中對齊 垂 直置中算是比較特別的一種寫法，只需要寫一個屬性值 center 即可，因為另外一個方向會自動取中間值。範例將背景圖片的位置設為固定（background-attachment:fixed）的主要原因是讓滑鼠上 下滑動的時候，背景圖片不會跟著被移動，不過這樣的效果只適用在網頁背景或是 textarea 這類網頁元素中，在 DIV 區塊內使用並沒有太大的意義。另外，background-position 不只是單純的用來設計網頁背景圖片位置，也能用來設計 DIV 區塊內的背景圖片位置，用法是一樣的。

CSS background-repeat 用來設定背景圖片是否重覆顯示以及重覆顯示的方向，通常與 background-image 搭配使用，若設計的網頁背景圖片是比較單純的色塊，採用 background-repeat 將小圖片自動佈滿整個網頁背景，是相當普遍的節省頻寬設計方式，當背景圖片是一張具有顯示範圍的大圖片，不希望出現圖片接圖片產生的視覺落差，也可以用 background-repeat 將圖片限制只顯示一次。

CSS background-repeat 基本語法

background-repeat: 方向與重覆參數;

語法中的方向與重覆參數用來控制背景圖片是否要重覆以及朝哪個方向重覆，預設值為水平方向與垂直方向連續顯示，網頁設計的基本方位，水平方向為 X 軸，垂直方向為 Y 軸，我們可以透過幾的不同的參數來設定背景圖片的顯示模式。

CSS background-repeat 方向與重覆參數

參數值	定義
repeat	預設重覆方式，背景圖片依 x 軸與 y 軸重覆呈現。
repeat-x	背景圖片沿 x 軸重覆呈現。
repeat-y	背景圖片沿 y 軸重覆呈現。
no-repeat	背景圖片不重覆出現，也就是只出現一次。

其 實還有一個 inherit 屬性是繼承父層屬性的意思，只是 IE 瀏覽器並不支援，未來不知道會不會支援，所以建議不要使用 inherit 比較好，因為台灣還是有相當多人只使用 IE 瀏覽器，如果使用 inherit 的設計方式，可能會有相當多的人開啟網頁發生排版錯誤或是圖片呈現錯誤。

CSS background-repeat 範例、DIV 區塊背景圖片限制重覆 以上範例呈現結果如 此 範例替一個 DIV 區塊設計背景圖片，透過 background-repeat 限制背景圖片只能顯示一次，寫成『background-repeat:no-repeat;』這樣，若要設計的是整個網頁背景圖片，則可以將 style 的語法寫在 body 標籤，如下方這樣的寫法。

控制整個網頁的背景是否重覆 這是比較基本的寫法，在 body 標籤內直接控制整個網頁背景圖片的呈現方式，同樣需要透過 background-image 與 background-repeat 的搭配設計，若要讓背景圖片在水平與垂直方向無限制的連續出現，則不一定需要使用 background-repeat，因為預設就會重覆出現。

CSS background-attachment 的功能，可以用來決定背景圖片是否要跟著滑鼠滾動而上下移動，有兩種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片跟著上下滾動，第二種為當滑鼠上 下滾動時，背景圖片固定不動，呈現效果就像是網頁主體與背景是分開的，似乎網頁主體是浮在背景圖之上的感覺，background-attachment 通常會與背景圖片（background-image）搭配設計。

CSS background-attachment 基本語法

background-attachment: 顯示參數;

基本語法中顯示參數可選擇的值為 scroll 以及 fixed，如下表所示。

參數	定義
scroll	預設值，背景圖片會隨著滑鼠滾動而上下移動。
fixed	背景圖片固定不動，滑鼠上下滾動僅會移動網頁主體。

CSS background-attachment 範例 以上範例語法中，你給的圖片將會固定不動，無論網頁怎麼拉動，圖片就是固定在你設定的位置上。偶爾設計師也會搭配 background-repeat 的效果，來設計背景圖片不重覆顯示的風格，所有的主流瀏覽器都支援 background-attachment 效果。

background-attachment 效果與 JavaScript 中的 object.style.backgroundAttachment="fixed" 一樣。

如果你習慣採用 DIV 來做網頁的排版，那就難免會碰到需要讓 DIV 置中的時候，在大部分主流的瀏覽器中，想要要讓 DIV 置中，僅需要用到 margin 就能夠達成，但在 IE 瀏覽器可就不是這麼一回事囉！這篇分享幾種不同的情況。

一、適用於大部分瀏覽器的 DIV 置中語法

margin:0px auto;

這樣的寫法基本上適用於 FireFox、Google Chrome、Opera 等常見主流瀏覽器。

二、適用於 IE8 的 DIV 置中語法

示意圖

這個技巧是使用兩個 <DIV> 來配合，父層的 <DIV> 設定 text-align:center 的意思是區塊內置中對齊。範例中使用到的 background-color 是背景顏色，主要目的僅是讓範例更容易呈現，另外 width 與 height 分別是 div 的寬度與高度。

三、適用於 IE6 與 IE7 的 DIV 置中語法

_margin:0px auto;　//適用於 IE6　*margin:0px auto;　//適用於 IE7

在某些時候會需要隱藏 DIV 區塊，例如網頁剛開啟的時候不顯示，當網友使用了某些選項再開啟 DIV 區塊之類的應用，而 DIV 隱藏有兩種常見的技巧，分別是 JavaScript 語法或是 CSS 隱藏，本篇要介紹的是 CSS 隱藏技巧，你可以透過以下兩種方式達成。

CSS DIV 隱藏技巧一

<div style="display:none">區塊中的內容</div>

CSS DIV 隱藏技巧二

<div style="visibility:hidden">區塊中的內容</div>

這 兩種用法有什麼樣的差異呢？簡單來說 display:none 的意思是隱藏包含 <div> 標籤整個元素，而 visibility:hidden 只會隱藏區塊中的內容，並保留 <div> 標籤的屬性，換句話說 <div> 標籤所佔的區塊還是存在，只是沒有顯示內容而已。

這篇可以說是 float 的延伸，在 CSS 中 float 是用來宣告元素浮動用的，如果想了解可以參考此篇：CSS float 浮動元素。本篇不針對浮動元素的使用方式介紹，專注於 DIV 區塊的浮動技巧說明。

假設有兩個 DIV 區塊，希望透過浮動的技巧讓兩的 DIV 可以水平排列，如下圖這樣：



DIV 區塊浮動示意語法 假設左邊藍色區塊為 DIV_A，右邊綠色區塊為 DIV_B，想要讓這兩個區塊水平排列在一起，可以使用 float 浮動技巧，分別設定 float:left 讓元素各自靠左浮動，這樣就可以做 DIV 出水平排列的效果囉！你也可以搭配 position 來定位 DIV 區塊的位置。

透過 CSS DIV 規劃兩欄式網頁設計的優點在於，可以讓整體程式碼更為乾淨整潔，同時在未來管理或修改上非常便利，而且兩欄式網頁可以說是非常普遍的設計方式，主要原因是網頁配置比起單欄式設計有更多的區塊空間可以使用，我們依然延續上一篇《CSS DIV 單欄式網頁排版》的介紹方式，先看看兩欄式網頁的基本樣貌，再分為 CSS style 以及 HTML Code 這兩個部分來看。

CSS DIV 兩欄式網頁排版呈現



常 見的網頁或是部落格的版面規劃類似這個樣子，最上方為網頁標頭 Header 區，最底下為網頁頁腳 Footer 區，中間分為兩欄式的區域，左邊是邊欄 Sidebar 區，右邊面積比較大的則是網頁內容區，主要的文章內容就放在這一區內。有了這樣的概念，以下就可以開始透過 css 的語法，將每個區塊分別設計出來，最後與 HTML 結合，就成為一個兩欄式排版的網頁規劃囉！

CSS style 部分 在 CSS style 中，分別為 Header、Sidebar、Body 以及 Footer 設計好樣式，與單欄式設計最大的差異在於，兩欄式設計使用了 CSS float 浮動技巧，讓邊欄 Sidebar 的 DIV 區塊與主要內文區 Body 的 DIV 區塊透過浮動的關係並排在一起，及可造就出兩欄式的網頁規劃，以下幾個是在 CSS style 內的樣式所代表的意思，原則上都是用來控制 DIV 區塊本身的大小、浮動、顏色以及 DIV 內部文字的樣式。

• width - 設定 DIV 寬度
• height - 設定 DIV 高度
• text-align - 設定 DIV 內的文字對齊
• line-height - 設定 DIV 內的文字行高
• font-size - 設定 DIV 內的文字大小
• color - 設定 DIV 內的文字顏色
• font-weight - 設定 DIV 內的文字粗細
• background-color - 設定 DIV 區塊的背景顏色

HTML Code 部分 回 到 HTML 的部分就顯得非常簡單，這也是透過 CSS 設計網頁的優點，設計師可以將範例的 CSS style 與 HTML Code 寫在同一支檔案內，並存成 test.html 這樣的檔案即可預覽，當然也可以透過嵌入的方式將 css style 寫成另外一個檔案再度嵌入至 HTML 頁面內，保持 HTML 頁面的整潔。回來看看這段 HTML Code，共有 5 個 DIV 區塊，因為多了一個用來清除浮動效果的區塊，主要功能是用來清除該行 DIV 以上的元素浮動效果，以便讓緊接著要出現的 Footer 區塊正常顯示。以上就是簡單的透過 CSS DIV 設計兩欄式網頁排版的技巧，其實要設計出兩欄式的網頁排版有很多種方式，設計師也可以根據需求做些改變，例如將 Sidebar 放在右邊的配置也非常普遍。

CSS DIV 排版已經是非常主流的網頁排板方式，透過簡單的 DIV 排版可以很容易創造出各式各樣的網頁版型，本篇主要講解 CSS DIV 單欄式的網頁排版設計，算是透過 DIV 排版最入門的方式了，畢竟基本款的單欄式網頁不需要用到浮動技巧。

CSS DIV 單欄式網頁排版呈現



假 設我們要設計的就是這樣單欄式的一個頁面，也就是左右沒有其他欄位，但至少也要分為最上方的 Header 標頭、中間的 Body 主要部分以及最下方的 Footer 頁腳等區塊，將每個區塊劃分出來後，就能夠很容易的在各區塊內增加網頁內容，為了能夠容易表達如何排出這樣的網頁排板，以下分為 CSS style 以及 HTML Code 的兩個部分，將此兩個部分結合在一起就能夠完成。

CSS style 部分 範例 CSS 的樣式共只有三個主要區塊，分別為 Header、Body 以及 Footer，分別控制下方 HTML Code 內的三個 DIV 區塊，瀏覽器會以 DIV 內的 id，判斷每個區塊的樣式應該要對應到上方 css 程式碼中的哪個部分，稍微說明一下範例中的幾個 style 所代表的意思。

• width - 設定 DIV 寬度
• height - 設定 DIV 高度
• text-align - 設定 DIV 內的文字對齊
• line-height - 設定 DIV 內的文字行高
• font-size - 設定 DIV 內的文字大小
• color - 設定 DIV 內的文字顏色
• font-weight - 設定 DIV 內的文字粗細
• background-color - 設定 DIV 區塊的背景顏色

HTML Code 部分 正如第一段所提到的，單欄式 DIV 排版非常基本，HTML Code 的部分就只要從最上方開始寫第一個 DIV，並依序寫著下來即可，每個區塊內容就可以自己填入。只要將以上 CSS style 以及 HTML Code 寫在同一支 HTML 檔案，存檔後就可以用瀏覽器呈現出結果。

三欄式的網頁排版設計是應用非常普遍的版型配置方式，優點是網頁內的區塊更多，尤其是邊欄上還可以加入許多不同 的欄位，隨著 CSS 的持續普及，現在的網頁設計師經常使用 CSS DIV 的區塊規劃，來設計三欄式網頁排板，透過每個 DIV 區塊的寬度、高度、浮動等技巧，搭配上不同的背景顏色，就可以很輕鬆的規劃出以下這三欄式網頁的樣貌，本文就以這個範例示意圖的原始碼來介紹如何使用 CSS DIV 設計出三欄式網頁，首先要看的是比較簡單的 HTML 部分，接著就是稍微複雜的 CSS 語法部分，但整體而言還算是 CSS 排版的基礎。



如 上圖三欄式網頁示意圖，我們規劃了幾個大區塊，分別為最上方的網頁標頭區 header、左右兩的邊欄 sidebar_left 與 sidebar_right、中間的網頁內文區 content 以及最下方的網頁腳區 footer，以下範例語法將告訴您如何設計出這樣的網頁版型。

HTML 語法架構 在 HTML 的部分相當簡單，最外圍使用區塊 sitebody 將所有的元素都包起來，裡面就依序建立 header、sidebar_left、sidebar_right、content 以及 footer 等 DIV 區塊，有了這樣的架構，就可以使用 CSS 將每個區塊的位置設計好。

CSS 語法 這段 CSS 語法中的幾個重點還是要提一下，首先每個 # 開頭接著的英文就是 DIV 的 id 名，代表的就是要替該 DIV 區塊做樣式設計，由最上方開始，先對整個網頁主體的大區塊 sitebody 做規劃，依序接著對 header、sidebar_left、sidebar_right、content、footer 做設計，要做出三欄式的網頁重點就在於 DIV 的浮動技巧，也就是 float，範例在左邊欄 sidebar_left 使用 float:left 代表向左浮動，右邊欄使用 float:right 代表要向右浮動，兩個邊欄向兩邊浮動，那網頁內文區 content 區塊自然就在中間呈現囉！以下為範例用到的各種語法說明。

• float - DIV 區塊浮動
• width - DIV 寬度
• height - DIV 高度
• margin - DIV 區塊的外距
• font-size - 文字大小
• background-color - 背景顏色
• text-align - 文字對齊
• line-height - 文字行高
• clear - 清除浮動

這裡稍微提示一下，為了範例呈現清楚，所以我們在左邊欄 sidebar_left、右邊欄 sidebar_right 以及內文區 content 的 DIV 區塊內使用了高度 height，實際應用時並不一定要使用 DIV 高度，通常都是讓內文的長度去決定網頁所呈現的長度。

只 要開一個空白的文件檔，將 CSS 語法貼進去，然後接著貼上 HTML 語法架構內的內容，順序是先 CSS 然後再 HTML，接存成 test.html 的檔案，用瀏覽器開起來就可以看到本文一開始的那個三欄式網頁範例示意圖，原則上 Chrome、FireFox、IE、Safari、Opera 等主流的瀏覽器都可以順利顯示。這只是透過 CSS DIV 設計出三欄式網頁的一種方法，網頁設計師當然有自己的一套設計方式，但大原則通常都是使用類似的手法，DIV 區塊的配置、DIV 寬度、margin、float、background ... 等，只要掌握這些基本的 CSS 概念，就可以靈活運用的設計出各種三欄式網頁。最後，想知道如何設計出單欄式網頁或兩欄式網頁嗎？還有兩篇詳細的介紹，可以比較與三欄式設計有什麼差異。

CSS box model 盒子模型也稱為區塊模型，所謂的 box model 其實就是傳統的 HTML 區塊概念再進化，假設我們用了一個 DIV 區塊來放置內容，CSS 允許網頁設計師將 DIV 區塊看成一個盒子，透過控制內距的 padding、控制外距的 margin 以及控制元素邊框的 border 屬性來調整盒子的展現結果，我們會在範例中呈現各種不同的 CSS box model 盒子模型效果，這對網頁排板有相當的幫助。

這裡要先解釋 CSS box model 會用到的屬性

• padding：用來設計元素內容與元素本身邊框間的距離，詳細請參閱：CSS padding 內距屬性與用法範例。
• margin：用來設計元素與外部元素的距離，詳細請參閱：CSS margin 屬性與用法範例。
• border：用來設計元素邊框的顏色、粗細與樣式，詳細請參閱：CSS border 邊框。

CSS box model 盒子模型的示意圖
CSS box model 盒子模型實際範例 範例的呈現結果
我們在範例中準備了兩個不同的 DIV 區塊，分別透過 CSS 的 border、padding、width、margin、background-color 等屬性設計出 box model 效果，第一個區塊是橘色的 5px 粗邊框，邊框與內容間的內距（padding）是 10px，再透過外距 margin 屬性加大與第二個區塊間的垂直距離，如此一來就不會黏在一起，第二個 DIV 區塊的邊框就顯得比較細，只有 2px 的寬度，不過因為套用了虛線（dashed）效果，視覺表現也還不錯看，內距調整為 6px，所以文字與邊框間的距離變近了，再加上淺灰色的背景顏色，整體呈現出來的效果完全不一樣，這就是 CSS box model 的設計應用範例，請自行變化練習。

CSS3 網頁背景淡出效果設計可以利用相機拍攝的照片，直接轉成淡出的網頁背景效果，不需要先用繪圖軟體就能做到，這個技巧所運用的是 CSS3 的 Gradients 漸層效果來處理，在 background 屬性裡加入背景圖片以及透明度與漸層處理，就可以呈現出網頁背景淡出效果，網頁設計師僅需調整顏色與透明度的參數，就可以直接調整網頁背景圖片的淡出效果，要多夢幻自己決定。

在這裡我們要先使用一張原始圖片作為網頁背景圖片
有了這張圖片，就可以套用到網頁背景中，來看看語法吧！

CSS3 網頁背景淡出效果範例一、透明度為 0 的情況 實際的淡出效果
我 們在範例一所使用的是從上而下的漸層效果，背景顏色由上方開始是白色（#ffffff）漸層變成下方的灰色（rgba(51,51,51,0)），不過我 們把灰色的部份透明度設為 0，也就是 rgba 的最後一個用來控制透明度的參數設為 0，所以背景圖片上方有一層白色霧茫茫的感覺，可是最下方是清楚的，如果想讓下方也蒙掉，那就調整灰色部份的透明度吧！請看範例二。

CSS3 網頁背景淡出效果範例二、透明度為 30% 的情況 實際的淡出效果
範例二將範例一的 rgba 最後一個參數設為 0.3，這代表灰色的部份透明度表現為 30%，與範例一相較之下，可以很明顯的看出背景圖片底下有一點點灰灰的感覺，這兩個範例都是使用同一張清晰的背景圖片，透過 Gradients 漸層效果效果與透明度調整，創造出網頁背景圖片淡出效果的實際應用，各位設計師可以自己修改範例與法中的漸層開始顏色與結束顏色，再調整透明度，就能變化出各式各樣的網頁背景淡出效果，相當有趣也很實用。

網頁漸層背景顏色效果是現在網頁設計師經常使用的一種技巧，傳統的網頁設計必須使用漸層圖片來當作網頁背景圖片，才能呈現出網頁漸層背景顏色的效果，不過 CSS3 有推出一個新的 Gradients 漸層效果功能，透過這一個 Gradients 設定就能輕鬆的讓瀏覽器自動替網頁呈現出漸層背景效果，不需要準備漸層圖片就能做到這樣的視覺效果，而且還可以設定漸層所要呈現的顏色與方向，顏色可以設定多個不同的顏色去變化，方向也可以設定上下左右延伸以及透過角度呈現，甚至可以設計成徑向漸層效果，功能非常強大。

CSS3 的 Gradients 漸層效果功能語法CSS3 的 Gradients 漸層效果功能是直接套用在 background 屬性中的一個功能，我們這篇介紹的兩種漸層方式差別在於 gradient 的前綴，線性漸層的前綴是 linear，徑向漸層的前綴則是 radial，除此之外，為了可以獲得最佳的瀏覽器支援效果，我們會在 gradient 的最前面再加上瀏覽器的前綴，讓瀏覽器知道我們要顯示 gradient 的功能，這些前綴整理如下。

瀏覽器適用前綴

• Google Chrome 與 Apple Safari 使用 -webkit-
• Mozilla FireFox 使用 -moz-
• Opera 使用 -o-

我們將以上的語法關念套用到範例看看設計出來的效果吧！

CSS3 網頁漸層背景顏色效果設計範例一、線性漸層 範例呈現的效果 範例中的 HTML 網頁部份共有兩個結構，其中一個就是網頁本身的 body 標籤，中間包著一個名為 container 的 DIV 區塊，這樣設計的用意在於利用 container 區塊的寬度與高度來填滿整個網頁比較有彈性，如果單純的在 body 標籤設定 CSS3 的 Gradients 漸層效果，會造成當網頁內容長度太長，超出預設的 body 標籤高度，超出的部份就不會有漸層背景顏色，所以我們在 body 標籤並未固定一個高度，而是在 container  區塊內設高度，隨著網頁內容的多寡再自己調整要顯示的漸層背景顏色範圍即可。

各位可以在範例中看到這個網頁的漸層背景顏色是由上往下發展，從第一個顏色黃色（yellow）開始漸漸變成紅色（yellow），你也可以設定更多不同的顏色、調整漸層的發展方向，更多變化請參閱《CSS3 Gradients 漸層效果》篇的詳細介紹。

CSS3 網頁漸層背景顏色效果設計範例二、徑向漸層 範例呈現的效果 範例二所呈現的就是 CSS3 Gradients 漸層效果功能中的徑向漸層，我們設計的顏色是白色（white）漸層至橘色（orange），預設的效果是從中心開始向外漸層，所以會看到像範例的這種效果，顏色一樣可以自己選擇，值得一提的是 CSS3 Gradients 預設的徑向漸層效果是橢圓形的，參數為 ellipse，允許網頁設計師調整為正圓形，只要使用參數 circle 即可，就像範例這樣。

以上兩個範例呈現了 CSS3 網頁漸層背景顏色效果設計的技巧，其實 Gradients 的功能很強大，可以做許多項的細微調整，關於更詳細的用法請各位詳細閱讀《CSS3 Gradients 漸層效果》篇的內容，對於設計出其它變化效果會有幫助。

CSS3 Gradients 是用來設計漸層效果的新功能，在傳統的網頁設計 中，如果要設計出一個漸層的背景顏色或一個具有漸層色彩的區塊，需要透過圖片的設計來處理，但是到了 CSS3 的發展，這樣的傳統設計思維有所改變，CSS3 推出了一個名為 Gradients 的功能，可以設計出不同的漸層效果，僅需透過 Gradients 的調整，例如漸層方向、漸層所呈現的顏色、漸層的呈現形狀，就可以很輕易的讓瀏覽器自己產生出漸層效果，可以應用在網頁本身的背景漸層效果或是區外的漸層 視覺效果，優點是不用先設計漸層圖片、減少頻寬的浪費，而且漸層放大後的效果也比傳統的圖片式漸層效果好，因為是用瀏覽器自動產生的漸層，優點自然不在話 下。

CSS3 Gradients 目前有兩種漸層效果，分別是線性漸層（Linear Gradients）以及徑向漸層（Radial Gradients），這兩者的設定方式不太一樣，實際的視覺效果當然也不一樣，本篇會依序提供它們的實際範例給各位讀者朋友參考。

瀏覽器對 CSS3 Gradients 的支援程度

• IE 10.0 及以上的版本支援。
• Google Chrome 26.0 及以上的版本支援。
• FireFox 16.0 及以上的版本支援。
• Apple Safari 6.1 及以上的版本支援。
• Opera 12.1 及以上的版本支援。

以上整理的是各家主流瀏覽器對 CSS3 Gradients 的支援程度，幾乎最新版本的瀏覽器都已經支援，不過在設計 Gradients 的時候，還是建議多找幾個瀏覽器實際測試效果，為了讓效果表現成功率更高，建議使用各種瀏覽器適用前綴，整理如下。

瀏覽器適用前綴

• Google Chrome 與 Apple Safari 使用 -webkit-
• Mozilla FireFox 使用 -moz-
• Opera 使用 -o-

線性漸層（Linear Gradient）與徑向漸層（Radial Gradients）的語法規則 線性漸層的方向可以是由上而下漸層、由下而上漸層、由左而右或由右而左漸層，甚至可以設定漸層角度，徑向漸層的部份則可以使用預設的橢圓形（ellipse）或自定為圓形（circle）漸層效果，這些都會在以下的範例中呈現給各位看。

CSS3 Gradients 的線性漸層 Linear Gradients 效果範例

Gradients 可以設定線性漸層的方向，預設值為由上而下，也允許網頁設計師設定為由左而右、由右而左甚至是對角線的線性表現，分別表現如下範例語法。

由上而下的線性漸層效果（預設值）
範例的實際效果 此範例設定的是由黃色開始漸層至紅色的效果，預設由上而下漸層。

由左而右的線性漸層效果 範例的實際效果 雖 然預設的 CSS3 Gradients 的線性漸層的預設效果是由上而下，但是也允許設計師採用橫向的漸層，例如此範例的由左而右漸層，值得注意的是適用於 Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數要用＂從哪個方向開始＂的概念，像語法中寫 left 就代表第一個顏色 yellow 是從左方開始向右漸層為 red，其它的瀏覽器則是用＂向哪個方向漸層＂的概念，所以第一個方向參數寫成 right 代表＂向右漸層＂的意思。

對角線的線性漸層效果（由左下向右上） 範例的實際效果 如 果由上而下漸層或由左而右水平方向的漸層無法滿足實際需求，也可以像此範例採用對角線的漸層方式，同樣的，適用於 Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數要用＂從哪個方向開始漸層＂，而其他的瀏覽器則使用＂向哪個方向漸層＂的概念。

利用角度調整的線性漸層效果 範例的實際效果 我 們在這個範例中採用角度來決定漸層的方向，CSS3 Gradients 的預設漸層方向是由上而下，不過在此我們利用 gradients 的第一個參數並設定為 90deg，也就是轉 90 度的意思，讓原本由上而下漸層的效果變成由左而右漸層，轉的角度允許設計師自己決定。

CSS3 Gradients 的徑向漸層 Radial Gradients 效果範例 範例的實際效果 CSS3 Gradients 不僅可以設計出線性漸層效果，還可以設計出徑向漸層 Radial Gradients 效果，所謂的徑向漸層就是像範例這樣圓形的漸層，Gradients 預設的 Radial 漸層是橢圓形（ellipse）的，允許網頁設計師修改為圓形（circle）漸層效果，從範例的呈現效果可以很明顯得看出橢圓形（ellipse）與圓 形（circle）漸層的效果差異。

CSS 的 background-image 用來替網頁本身（body）或網頁元素插入背景圖片相當好用，這個背景圖片屬性到了 CSS3 有了更強大的進步，CSS 設計師可以利用全新的 background-image 屬性設計出具有多重背景圖片的效果，而且使用方式非常簡單，就是在傳統插入一張背景圖片的模式，增加為插入兩張或兩張以上的背景圖片，讓瀏覽器同時呈現出兩個背景圖片重疊的效果，對於想要創造網頁多層次感背景圖片的風格相當有幫助，如果你還不熟悉 background-image 屬性的語法，我們這裡先來複習一下 。

CSS background image 屬性語法 參數的部分就是背景圖片插入的網址，CSS3 開始讓 background-image 屬性允許使用多個不同的 url 參數來增加背景圖片的數量，我們這一篇由於要設計出多重網頁背景圖片的效果，所以待會的範例中，我們會在同一個 background-image 屬性內，使用三個 url 參數來插入三張不同的背景圖片，馬上就來看看實際的範例應用。

CSS3多重背景圖片實際設計範例 這裡使用的三張背景圖片是這三張（用表格呈現給各位看）
套用後的多重背景圖片視覺效果如下 將三張不同的背景圖片套用到 background-image 屬性後，可以看到非常繽紛的效果，因為每一張背景圖片都有呈現出來，層疊在一起就會有這樣的視覺效果，同樣的概念可以透過不同的背景圖片，設計出更精緻的多層次感背景效果。

有一個關鍵→ png

這裡要稍微提醒一下，要製作這種多重背景圖片的效果，所選用的背景圖片必須是透明圖檔，也就是說，要顯示的圖案可以正常顯示，其他的部份要是透明的，例如我們在範例中所使用的三張圖片，全部都是使用有透明效果的 png 圖檔。

CSS3 設計背景圖片自動縮放全螢幕展示效果是許多新一代網頁設計的基礎，這樣的效果就是背景圖片隨著網頁大小縮放而自動跟著縮放至全螢幕，要設計出這樣的效果很簡單，只要將 CSS 的 background 屬性結合 CSS3 的 background-size 屬性，兩者搭配起來就能設計背景圖片自動全螢幕展示效果，我們會在 background 屬性中加入背景圖片以及圖片的呈現方式，也會在 background-size 屬性設定背景圖片的填滿方式，實際的視覺效果還不錯，也受到各種新版主流瀏覽器的支援。

利用 CSS3 設計背景圖片自動縮放全螢幕展示效果範例語法 透過以上的設定方式，就能讓背景圖片自動隨著瀏覽視窗大小縮放，而且會填滿整個瀏覽視窗，語法中的「margin:0px;」與「padding:0px;」的意思是網頁主體 body 標籤的外距與內距都設為 0，接著 background 屬性的設定方式解說如下：
各個參數由左而右的意思是這樣 最後的「background-size: cover;」表示背景圖片要填滿整個容器，根據上面的設計就是整個瀏覽視窗。

補充，這樣網頁背景圖片自動填滿並自動縮放的效果所使用的是 background 屬性而不是 background-image 背景圖片屬性。

CSS3 具有比 CSS2 更強大的邊框設計功能，包含了三項新屬性，分別是設計圓角矩形的 border-radius、設計陰影效果的 box-shadow 以及設計圖片邊框效果的 border-image 這三個屬性，利用這三個全新的 CSS3 邊框屬性，可以讓網頁設計師迅速的做出美觀的元素邊框，而且不需要用傳統的 Photoshop 或 GIMP 等繪圖軟體來設計這些效果，除了 border-image 需要先準備好圖片之外，幾乎用不到繪圖軟體，也因為這三個邊框設計效果實在很好用，所以獲得了絕大多數主流瀏覽器的支援，例如最新版的 IE, FireFox, Chrome, Opera, Safari ... 等，本篇將替這三項 CSS3 邊框屬性做基本的範例介紹，您可以由每個範例分別進入各個屬性的詳細介紹頁面閱讀。

CSS3 邊框設計範例一、設計圓角矩形的 border-radius 屬性 範例的實際效果 範例一是將 CSS3 的 border-radius 屬性套用到 DIV 區塊內，修飾 DIV 區塊預設的四個垂直轉角成為圓角的視覺效果，傳統的圓角邊框通常會採用繪圖軟體來製作，不過 CSS3 的 border-radius 很顯然的提供了更有效率的設計方案。

詳細介紹：CSS3 圓角 border-radius。

CSS3 邊框設計範例二、設計陰影效果的 box-shadow 屬性 範例的實際效果 範例二將 CSS3 的 box-shadow 屬性套用到 DIV 區塊，替這個區塊增加了粉紅色的陰影效果，是不是挺漂亮的呢？嚴格來說 box-shadow 並不屬於 CSS3 邊框設計的一環，只能算是一個新功能，不過 box-shadow 用起來通常視覺效果都在邊框的部份，所以就一併介紹。

詳細介紹：CSS3 box-shadow

CSS3 邊框設計範例三、設計圖片邊框效果的 border-image 屬性 範例的實際效果 範例三是一個很特殊的功能，各位可以從範例的實際效果看到這個 DIV 區塊有很美麗的圖片邊框，那邊框效果真的是一張圖片所展現出來的效果，不過特別的地方在於原始圖片其實只是一張小圖，大小尺寸與 DIV 區塊完全不同，我們是透過 CSS3 的 border-image 屬性來設定，讓小圖與大的 DIV 區塊尺寸吻合，成為相當具有美感的 DIV 區塊，這種效果在傳統網頁設計技術下，也必須採用繪圖軟體製作。

CSS3 outline-offset 屬性是 CSS 中 outline 屬性的進化版，網頁設計師可以使用 outline 屬性替網頁元素增加輪廓的視覺效果，不過預設的輪廓視覺效果會與元素邊框黏在一起，有辦法把輪廓與邊框分開來嗎？傳統的 CSS 還做不到，但是在 CSS3 推出的 outline-offset 屬性就可以做到，而且網頁設計師還可以自己決定輪廓與元素邊框的距離，創造出以往所無法呈現的視覺效果，實際的表現會在範例中秀出來，除了 IE 瀏覽器之外，其他大部分的主流瀏覽器都支援 CSS3 outline-offset 屬性的效果。

SS3 outline-offset 屬性語法 CSS3 outline-offset 屬性只需要設定一個長度距離即可，這個長度距離所代表的就是元素邊框（border）與輪廓（outline）之間的距離，經常使用的單位是 px，另外 outline-offset 屬性還可以使用 inherit 屬性值，繼承自父層的 outlet-offset 屬性值，若要使用 inherit，請多找幾個瀏覽器做測試，特別是 IE 瀏覽器。

CSS3 outline-offset 屬性範例 範例的實際效果
我們在範例中準備了三個 DIV 區塊，分別設定了不同的 CSS3 outline-offset 屬性效果，第一個 DIV 區塊將 outline-offset 設為 -5px，所以輪廓 outline 跑到 DIV 區塊的邊框內，不過這應該不會輪廓的正常用法，只是呈現給各位看而已，第二個 DIV 區塊將 outline-offset 設為 0px，這樣的效果跟沒有寫是一樣的，所以也只是給各位參考，第三個 DIV 區塊把 outline-offset 設為 10px，很明顯得可以看到輪廓距離 DIV 區塊本身的黑色邊框有 10px 的距離，這就是 CSS3 outline-offset 屬性的真正用途。

備註、CSS3 outline-offset 屬性通常會與 outline 屬性共同搭配使用。

CSS3 box-sizing 屬性的功能是用來調整區塊的內距與邊框計算方式，預設的 DIV 區塊的邊框最外的寬度，會因為內距 padding 的值以及邊框 border 的粗細而有所影響，常見的情況是設計師調整了 padding 或邊框的粗細，導致整個 DIV 區塊的寬度改變，輕則影響到美觀，重則影響到整個網頁的排版，有了 CSS3 box-sizing 屬性，網頁設計師可以自己控制 DIV 區塊邊框的計算方式，改善寬度跑掉的問題。

CSS3 box-sizing 屬性語法 CSS3 box-sizing 屬性的設定値可以有三種，分別是 content-box, border-box, inherit，整理於下表。

CSS3 box-sizing 屬性可設定値

參數值	語法	說明
content-box	box-sizing:content-box;	DIV 設定的寬度僅為內容寬度，而內距與邊框額外加上去。
border-box	box-sizing:border-box;	DIV 設定的寬度就已經包含內容寬度、內距與邊框寬度。
inherit	box-sizing:inherit;	繼承至父層的 broder-sizing 設定値。

由 於 box-sizing 是 CSS3 的新功能，各家瀏覽器的支援程度不一，所以我們必須使用前綴（Prefixes）來提醒瀏覽器要正確顯示 box-sizing 屬性的功能，例如 Firefox 就使用 -moz- 的前綴、Safari 系列就使用 -webkit- 的前綴，這在範例中可以看到。

CSS3 box-sizing 屬性範例 範例的輸出結果 範例總共有兩個設定了 box-sizing 的橘色 DIV 區塊，且外圍都用一個寬度為 300px 的藍色 DIV 區塊包起來，第一個橘色的 DIV 區塊因為使用了「box-sizing:content-box;」，所以 padding 所占用的 5px 以及邊框所占用的 5px 分別在左右兩邊加了上去，最後橘色的 DIV 區塊總寬度就變成 320px，因此超出了藍色 DIV 區塊的範圍。

第二個橘色 DIV 區塊則使用了「box-sizing:border-box;」，所以 DIV 的總寬度包含了內容寬度、內距（padding）占用的寬度以及邊框所占用的寬度，換句話說，橘色 DIV 區塊的總寬度依然是 300px，不會超出藍色 DIV 區塊的範圍。

備註：藍色 DIV 區塊邊框內的寬度剛好是 300px。

CSS3 resize 屬性的功能是讓網頁的使用者可以自行調整div區塊元素的大小，讓傳統只能固定的 DIV 區塊有 了可調整的功能，網頁設計師可以利用CSS3 resize 屬性的功能，開放 DIV 區塊可以調整的範圍，例如可以調整寬度與高度、只能調整寬度或只能調整高度，網頁設計師可以根據網頁功能上的需求，做有限度的開放，這就是 CSS3 resize 屬性的主要功能，不過有部分的瀏覽器並不支援 CSS3 resize 屬性的效果，因為這是 CSS3 的新功能，建議各位網頁設計師在採用主題的時候多找幾個瀏覽器測試效果。

2015/5/11 測試，支援 CSS3 resize 屬性的瀏覽器包含 FireFox, Chrome, Opera, Safari 等，不過都必須搭配 overflow 屬性才能正常運作，至於 IE11 還是不支援。

CSS3 resize 屬性語法 CSS3 resize 的參數值即為控制是否要開放所能調整的範圍，整理如下表：

CSS3 resize 屬性參數值

寬度值	語法	說明
none	resize:none;	預設值，瀏覽者不能調整 DIV 區塊的大小。
both	resize:both;	瀏覽者可以自行調整 DIV 區塊的寬度與高度
horizontal	resize:horizontal;	瀏覽者僅能自行調整 DIV 區塊的寬度
vertical	resize:vertical;	瀏覽者僅能自行調整 DIV 區塊的高度

CSS3 resize 屬性範例 範例的輸出效果（DIV 區塊右下角有個可拉動的符號） 範例的 DIV 區塊預設寬度為 380px，我們替這個 DIV 區塊加上「resize:both;」的語法，讓瀏覽者可以自行調整 DIV 區塊的寬度與高度，這裡我們同時使用了「overflow:auto;」的語法，這樣 resize 的效果才會顯現出來，如果你的 DIV 區塊有需要讓網友拉動變大或縮小，CSS3 resize 屬性非常好用，不過還是要建議多找幾個瀏覽器做測試。

CSS3 transform-origin 是個用來與 transform 搭配的屬性，可以用來定義＂有設定 transform 屬性的網頁元素＂的旋轉基礎點位置，另外一種說法是用來改變其旋轉基礎點的位置，因為 transform 屬性預設的旋轉基礎點位置並不一定能滿足設計師的要求，所以 CSS3 推出了transform-origin 屬性來搭配，讓網頁設計師能夠輕易的調整要在哪個地方旋轉，為了要達到這樣的功能，所以 CSS3 transform-origin 屬性可以設定 X 軸、Y 軸的旋轉位置，甚至連 Z 軸的旋轉位置都能設定，換言之，CSS3 transform-origin 屬性可以處理 2D 與 3D 的效果。

CSS3 transform-origin 屬性語法 請注意 transform-origin 屬性參數的順序，由左而右分別是 X 軸、Y 軸以及 Z 軸，可以設定的參數列舉於下：

• X 軸方向可以設定：left, center, right, 長度或百分比。
• Y 軸方向可以設定：left, center, right, 長度或百分比。
• Z 軸方向僅可設定長度。

接著我們將 CSS3 transform-origin 屬性套用到範例中看效果。

CSS3 transform-origin 屬性範例 範例的輸出效果
看到實際的效果是不是覺得很有趣呢？原本不會旋轉的 DIV 區塊，透過 transform 做出旋轉效果後，再用 transform-origin 屬性的搭配，來改變預設的旋轉基準點，創造出兩個 DIV 區塊重疊的效果，同樣的手法也可以用在 transform 其他的效果上，例如改變傾斜的基準點。

CSS3 transform 屬性的功能提供了網頁設計中對於網頁元素（element）變形特效的突破，透過 CSS3 transform 屬性，網頁設計師可以很輕易的讓網頁元素（element）呈現出旋轉（rotate）、縮放（scale）、移動（move）以及傾斜（skew）的特 殊效果，讓傳統網頁設計中，需要透過繪圖軟體才能達到的效果，透過 CSS3 transform 屬性快速達成。

不過 CSS3 transform 屬性也有一點小缺點，就是不能一次使用太多，因為 CSS3 transform 屬性的運作方式是讓瀏覽器（Browser）自動計算元素的各個座標位置，進行數學的函數計算，再顯示出變化效果，所以如果一次使用太多在同一個頁面內， 會導致瀏覽起來卡卡的，不過這個問題在未來應該會越來越不明顯，畢竟電腦的處理速度也在提升，CSS3 transform 屬性在未來應該會獲得大量使用。

CSS3 transform 屬性語法 CSS 的 transform 屬性有一個參數 transform-function 可以使用，這個參數有非常多種不同的變化，而且也不是隨意設定，CSS3 有特定的參數可以套用，這就是讓網頁元素（element）變形的主要設定方式，我們將參數整理於下表。

CSS3 transform 屬性常用特效參數表

方案	參數	說明
轉換	translate(x,y)	由參考點進行 2D 轉換特效，向 x 軸移動 x 距離，Y 軸移動 y 距離。
轉換	translate3d(x,y,z)	由參考點進行 3D 轉換特效。
轉換	translateX(x)	定義 X 軸方向的 2D 轉換。
轉換	translateY(y)	定義 Y 軸方向的 2D 轉換。
轉換	translateZ(z)	定義 Z 軸方向的 3D 轉換。
縮放	scale(x,y)	由參考點進行 2D 縮放特效，X 軸方向縮放 x 倍，Y 軸方向縮放 y 倍。
縮放	scale3d(x,y,z)	由參考點進行 3D 縮放特效。
縮放	scaleX(x)	定義 X 軸方向的 2D 縮放。
縮放	scaleY(y)	定義 Y 軸方向的 2D 縮放。
縮放	scaleZ(z)	定義 Z 軸方向的 2D 縮放。
旋轉	rotate(角度)	根據設定的角度，以參考點為中心軸進行 2D 旋轉。
旋轉	rotate3d(x,y,z,角度)	根據設定的角度，以參考點為中心軸進行 3D 旋轉。
旋轉	rotateX(角度)	沿著 X 軸進行 3D 旋轉所設定的角度。
旋轉	rotateY(角度)	沿著 Y 軸進行 3D 旋轉所設定的角度。
旋轉	rotateZ(角度)	沿著 Z 軸進行 3D 旋轉所設定的角度。
傾斜	skew(x,y)	以參考點為中心，沿著 X 軸方向傾斜 x 度，沿著 Y 軸方向傾斜 y 度。
傾斜	skewX(角度)	以參考點為中心，沿著 X 軸方向傾斜 x 度。
傾斜	skewY(角度)	以參考點為中心，沿著 Y 軸方向傾斜 y 度。
矩陣	matrix(6個值)	利用 6 個值的設定進行 2D 矩陣變化，如 transform:matrix(0,0,0,0,0,0)。
矩陣	matrix3d(16個值)	利用 16 個值的設定進行 3D 矩陣變化。

為獲得瀏覽器良好支援，須使用瀏覽器前娺

• -moz-transform：適用於 firefox 瀏覽器。
• -webkit-transform：適用於 safari, google chrome,opera 等瀏覽器。
• -o-transform：適用於 opera 瀏覽器。
• -ms-transform：適用於 ie 瀏覽器。

CSS3 transform 屬性範例一、轉換（translate）的變形特效 範例效果 範例一的紅色與藍色 DIV 區塊分別向 X 軸與 Y 軸方向進行轉換，感覺其實就像是移動位置。

CSS3 transform 屬性範例二、縮放（scale）的變形特效 範例效果 範例二讓紅色的 DIV 區塊在 Y 軸方向進行放大，區塊內的文字也同樣受到放大的效果而變形。

CSS3 transform 屬性範例三、旋轉（rotate）的變形特效 範例效果 範例三讓紅色與藍色的 DIV 區塊進行旋轉，不過兩個區塊的旋轉角度並不一樣，所以呈現出交錯的效果，而區塊內文字也跟著旋轉而變形，如果繼續調整角度，兩個區塊的旋轉效果會更加明顯。

CSS3 transform 屬性範例四、傾斜（skew）的變形特效 範例效果 範例四讓紅色的 DIV 區塊在 X 軸方向與 Y 軸方向各進行 5 度的傾斜效果，藍色的 DIV 區塊則在 X 方向進行 -20 度的傾斜效果，如果繼續調整傾斜角度，傾斜效果將會更加明顯，區塊內的文字也跟著傾斜效果而產生了變形的視覺效果。

CSS3 在網頁元素背景設計的部份，比起 CSS2 又有了更進一步的提升，主要提供了可以用來控制背景大小的 background-size 屬性以及可以用來控制背景定位的 background-origin 屬性，這兩個屬性用起來雖然語法稍微複雜了一點（主要是參數較多樣化），不過卻可以達到以往無法做到的網頁元素背景特效，例如 background-size 屬性可以設定讓背景圖片隨的螢幕縮放而自動跟著縮放，這在傳統的網頁設計技術，是必須用 Flash 來製作的，不過現在可以直接透過 CSS3 的背景設計屬性做到，而且效果還不錯，以下我們將這兩個 CSS3 新增的背景設計功能，利用範例的方式呈現給各位參考。

CSS3 背景設計範例一、background-size 屬性 範例呈現的效果 在範例一中，我們透過 CSS3 背景設計中的 background-size 屬性，把原本只有 300x80 的背景圖片修改為 360x100 的大小，讓背景圖片可以完全符合 DIV 區塊的大小，如此一來就不會有留白的現象出現，效果有點類似傳統 HTML 的圖片寬度設計。

深入研究：CSS3 background-size 屬性

CSS3 背景設計範例二、background-origin 屬性 範例呈現的效果 範例二要呈現的是 CSS3 背景設計的 background-origin 屬性，這個屬性的主要功能是用來設定背景圖片的定位，在範例中，相信各位可以看到那張藍色的背景圖片被定位在邊框的範圍內，沒有壓到邊框的區域，這就是 CSS3 背景設計的一大進步，因為這樣的效果在傳統的設計架構下，要完成是很麻煩的事情，如果透過 CSS3 背景設計功能，可以很輕易的達成，設計出來的網頁當然也就更細緻。

CSS 設計的發展大至可以分為 CSS1、CSS2 到 CSS3，以目前 2015 年的網路環境來說，CSS1, CSS2 都已經屬於成熟型的網頁設計技術，而 CSS3 也發展得差不多完備，只是尚有許多好用的功能未獲得所有主流瀏覽器的支援，回過頭看，CSS1 早在西元 1994 年就開始推廣，到了西元1998年5月，W3C 發表了 CSS2，兩代間相隔約 4 年左右，而現在最新的 CSS3 是從西元 1999 年就開始制定，不過等到 2011 年才正式發佈，時間與前兩代的版本相差非常多年，CSS3 的變革主要在幾個部份，包含 border-radius、text-shadow、transform、transition 這些新功能，透過這些新功能，可以讓原本較為靜態的視覺效果，變成有許多動態或動畫特效。目前 CSS4 也已經開始發展中。

CSS3 border-radius 屬性範例、創造圓角效果 範例輸出結果 傳統在設計一個區塊的圓角效果通常必須採用圖片的方式來設計，預設的 DIV 區塊四個角都是直角，CSS3 新增了 border-radius 屬性，可以快速的設計出圓角效果，大幅度節省設計時間，圓角效果還有多種變化，請參閱《CSS3 圓角 border-radius》篇詳細介紹。

CSS3 text-shadow 屬性範例、創造陰影效果 範例輸出結果 陰影效果也是 CSS3 的重要新增功能，所謂的陰影效果包含了文字與區塊的陰影效果，輕鬆增加網頁元素的立體視覺感受，取代以往傳統用繪圖軟體製作陰影文字的設計方式，CSS3 的兩種陰影效果請參閱《CSS3 box-shadow》與《CSS3 text-shadow 文字陰影效果》篇。

CSS3 transition 屬性範例、創造動畫效果 範例輸出結果 動 畫效果可說是 CSS3 最為迷人之處，因為網頁設計師可以利用 CSS3 的 transition 屬性，輕鬆寫出一個動畫效果，取代傳統用 Flash 設計的許多動畫，而且具有檔案精簡、傳輸效率高以及修改容易等優點，更不用擔心用戶端沒有安裝 Flash 閱讀軟體，常見 Google 首頁在特定節日或紀念日的 Doodle 動畫，就常採用 CSS3 與 HTML5 結合在一起的設計，關於 CSS3 動畫，請參閱以下篇幅的介紹。

CSS3 background-size 屬性的功能是用來設定背景圖片（background-image）的大小，background-size 屬性允許多種背景圖片大小調整方式，例如自訂背景圖片的寬度與高度、根據容器（如 DIV 區塊） 大小而調整背景圖片的百分比、將背景圖片放大並填滿整個容器區域或是自動縮小背景圖片的大小使其可以完整呈現於容器的範圍內，以往在 CSS2 之前，要調整背景圖片與 DIV 的大小，通常會直接開繪圖軟體來處理圖片，CSS3 的 background-size 屬性提供網頁設計師更有效率的背景圖片調整方式，已經獲得大多數主流瀏覽器的支援。

CSS3 background-size 屬性語法 CSS 的 background-size 屬性調整背景圖片的參數有好幾種設定值，整理如下表所示。

CSS3 background-size 可能的設定值

設定值	說明
auto	預設值，維持背景圖片原本的大小。
length	自訂背景圖片的大小，可以用兩個數字表示，先是設定寬度，再來是設定高度，不可為負數，如果只寫一個數字，第二個數字則會自動設為 auto 的效果，背景圖片自動縮放。
percentage	自訂背景圖片的大小，用兩個數字百分比表示，第一個數字百分比是設定寬度，第二個數字百分比是設定高度，如果只寫一個，則第二個將自動設為 auto 的效果，背景圖片自動縮放。
cover	使用於背景圖片小於容器時，將背景圖片的大小放大至容器的大小並填滿，缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合，會出現背景圖片失真的情況。
contain	使用於背景圖片大於容器時，將背景圖片縮小至可以在容器內呈現。

CSS3 background-size 屬性範例一、使用 length 設定背景圖片寬度與高度 範例的效果 範例一在一個大小為 360x80 的 DIV 區塊內使用了一個比較小的背景圖片，我們透過 background-size 屬性將背景圖片的寬度加大為 360px，高度則加大為 80px，雖然還沒有到達 DIV 區塊的大小，不過已經可以很明顯得看到原本的背景圖片被加大了。

使用 background-size 的自訂寬度與高度要注意比例的問題，最好自己先算好放大的寬度與高度要設多少，以免背景圖片因為放大後的比例不正確而失真，接著我們來看範例二，如何不用自己設定寬度與高度也能放大背景圖片。

CSS3 background-size 屬性範例二、使用 cover 擴大背景圖片 範例的效果 範例二使用 background-size 的 cover 效果，不需要像範例一那樣自己設定背景圖片的寬度與高度，讓 cover 的效果直接把背景圖片放大並填滿整個 DIV 區塊，這樣是不是很方便呢？不過缺點是放大的背景圖片比例會根據 DIV 區塊的比例而改變，所以有的時候會有圖片失真的情況，請斟酌使用 cover 效果，範例二的 DIV 區塊比例與原始圖片差不多，所以看起來還蠻正常的。

CSS3 background-size 屬性範例三、使用 contain 擴展背景圖片 範例的效果 範例三的 DIV 區塊比較小一點，甚至比要使用的背景圖片還要小一點，這個時候我們希望背景圖片還是可以放在整個 DIV 區塊內，而且圖片的花紋不要跑掉，這時候就可以使用 background-size 屬性的 contain 效果，讓背景圖片等比例縮小在 DIV 區塊內。

實際上 contain 效果除了可以縮小背景圖片之外，也可以放大背景圖片，假設範例三的 DIV 區塊比較大，使用 background-size 屬性的 contain 效果就會讓原始圖片等比例放大，同樣呈現在整個 DIV 區塊內。

CSS3 background-origin 屬性的功能是用來控制背景圖片的位置設定，透過 CSS3 的 background-origin 屬性可以輕易的讓 DIV 區塊的背景圖片根據外邊框（border-box）、內距邊框（padding-box）以及內容邊框（content-box）來定位，讓傳統設置 DIV 背景圖片位置對齊的工作迅速獲得解決，由於 background-origin 屬性屬於 CSS3 較新的功能，部份的瀏覽器要新版的才支援，整理給 CSS 設計師各位參考。

常用瀏覽器對 CSS3 background-origin 屬性的支援情況

瀏覽器	Google Chrome	Mozilla FireFox	Apple Safari	Opera	Internet Explorer
支援版本	最新版已支援	最新版已支援	最新版已支援	最新版已支援	IE9 以上開始支援

接著我們繼續看 background-origin 的語法以及範例

CSS3 background-origin 屬性語法規則 CSS3 的 background-origin 屬性共有三種可以選用的定位方式，分別整理如下。

三個可用的設定

定位設定	說明
background-origin:border-box;	背景圖片根據外邊框定位。
background-origin:padding-box;	背景圖片根據內距邊框定位，預設值。
background-origin:content-box;	背景圖片根據內文邊框定位。

讓每一種定位效果可以明顯呈現，最好要有較粗的 border 設定，以下分為三個不同的實際設定效果。

CSS3 background-origin 屬性範例一、使用外邊框（border-box）定位 範例的實際效果 使用 border-box 的定位方式會讓 DIV 區塊的背景圖片靠在外邊框定位，我們特地將範例的 DIV 邊框加粗至 10px，可以看到背景圖片有一部份與 DIV 邊框重疊，那是因為 background-origin:border-box 的效果讓背景圖片強制定位在外邊框切齊。

備註：使用 background-origin 屬性也必須同時使用 background-image 以及 background-repeat 屬性，並將 background-repeat 的屬性值設定為 no-repeat 才能發揮 background-origin 的背景圖片定位效果。

CSS3 background-origin 屬性範例二、使用內距邊框（padding-box）定位 範例的實際效果 範例二使用 background-origin 的 padding-box 定位，將會讓背景圖片根據內距的邊框定位，也就是背景圖片將對齊於 DIV 邊框的內側，很多人會誤以為 padding-box 的定位會根據 DIV 本身的 padding 設定而改變，其實不會，padding-box 只會讓背景圖片根據 DIV 邊框內側定位，隨著 DIV 區塊邊框的粗細而改變位置。padding-box 是 background-origin 屬性的預設值。

CSS3 background-origin 屬性範例三、使用內容邊框（content-box）定位 範例的實際效果 範例三採用的是 background-origin 的 content-box 定位方式，此種設定會讓 DIV 區塊的背景圖片根據＂內容的邊框＂定位，這種定位方式就與 DIV 本身的 padding 設定有關係，padding 設定越多，背景圖片的位置距離 DIV 邊框的距離就會越遠。

備註：background-origin 屬性只有在 background-attachment 設定為 scroll 時有效。

CSS3 border-image 屬性可以讓網頁元素的邊框用圖片表示，通常應用在 DIV 區塊上，當然 border-image 也可以應用在其他元素上，例如網頁按鈕邊框也行，但是最常用到 border-image 屬性還是 DIV 區塊。傳統的 CSS 設計要在 DIV 區塊增加圖片邊框效果並不容易，當 CSS 技術發展到 CSS3 時，透過 border-image 屬性卻可以很輕易的替 DIV 區塊加上圖片邊框，這樣一來要增添豐富的視覺效果就更加容易了。

儘 管 CSS3 border-image 屬性相當的便利，也受到大部份主流的瀏覽器支援，但是舊版的 IE 瀏覽器並不支援 CSS3 border-image 屬性，直到新版的 IE 11 才開始支援，所以在使用 border-image 屬性時，請仔細考量設計出來的網頁瀏覽族群。

CSS3 border-image 屬性整合語法 CSS3 的 border-image 屬性整合寫法有很多不同的項目，分別用來設定圖片來源網址、圖片切割、圖片寬度、與邊框的關係以及圖片的填滿方式，這種整合寫法有點類似 border 屬性，當然這些項目也都可以拆開來寫，整理如下。

CSS3 border-image 屬性的各種語法

值	說明
border-image-source	圖片來源網址。
border-image-slice	將要使用的圖片邊框分割為九格，分別抓出四個角的圖片。
border-image-width	設定圖片邊框的寬度。
border-image-outset	邊框圖片超出邊框的量。
border-image-repeat	設定圖片的填滿方式，有三種常用參數。 round - 用重複方式填滿，有縮放圖片功能*。 repeat - 用重複方式填滿。 stretch - 用延展方式填滿。

* round 在無法用整數倍數填滿的時候，會用整數倍數縮放圖片再填滿。

CSS3 border-image 屬性範例一、以 round 方式填滿
範例的效果 以 round 的方式填滿 DIV 區塊的邊框，可以看到四個角依然是使用藍色的方塊，其餘的線條則都用黃色圓形填滿，而且黃色圓形是重複的出現，原始的圖片其實並不小張，可是我們在一開始有設定 DIV 的邊框尺寸以及寬度，所以 border-image 屬性會根據我們設定好的 DIV 區塊的邊框來呈現最終的圖片邊框效果。這裡稍微注意一下，DIV 的 border 設定中，有一個 transparent 是讓原本的邊框變透明，這樣才能顯示圖片邊框的效果，否則圖片會被原本的邊框蓋掉而失效，這也是使用 border-image 屬性的一個必要技巧。

CSS3 border-image 屬性範例二、以 repeat 方式填滿
範例的效果 範例二採用 repeat 的方式填滿 DIV 區塊的邊框，有注意到轉角處的黃色圓形與藍色方形交界處的變化嗎？黃色圓形並不是完美的圓，而是有部份被藍色的方形檔住了，那是因為 repeat 採用的是重複填滿，所以邊框上的許多黃色圓形重複到轉角就被蓋住，圓形並不會自己縮放，可以看出 repeat 的效果與範例一的 round 有很大的差別。

CSS3 border-image 屬性範例三、以 stretch 方式填滿 範例的效果 範例三採用的是 stretch 的延展方式填滿 DIV 區塊邊框，我們可以很清楚的看出 stretch 的效果與前面兩個 round 及 repeat 差異甚大，因為 stretch 直接將原始圖片中的黃色圓形延展為長條形，效果是不是也相當不錯呢？

CSS3 Image Opacity 圖片透明效果是 CSS3 推薦的新功能，可以輕易的用來調整網頁中圖片的透明度，CSS3 Image Opacity 的圖片透明度設計技巧運用的是 CSS3 的 opacity 標準屬性，如果再加上 CSS 的 hover 動作判斷，可以製作出滑鼠移至圖片上方時，圖片自動產生透明度差異的特效，主流的新版瀏覽器都支援 CSS3 Image Opacity 圖片透明效果。

CSS3 Image Opacity 圖片透明效果範例一、單純的圖片透明度調整 範例呈現效果 範例一共準備了兩張圖片，左邊的圖片使用 CSS3 的 opacity 屬性並將透明度設為完全不透明，右邊的圖片則是相透明度設為 0.5，也可以說是半透明效果，另外，我們在 Img0 與 Img1 都使用 filter 屬性來讓較早期版本的 IE 瀏覽器能順利產生透明圖片效果。

➤ CSS3 opacity 的透明度範圍調整從 0.0~1.0 有不同的效果，詳細用法請參閱：CSS3 opacity 屬性 (透明效果)

CSS3 Image Opacity 圖片透明效果範例二、加入動作的透明度變化 範例呈現效果 範例二要做的是滑鼠移經圖片所產生的透明度變化效果，先將透明度設為半透明（opacity:0.5），再透過 CSS 的 hover 動作判斷功能，將透明度設為完全不透明（opacity:1.0），就能創造出滑鼠移經圖片所產生的透明度變化效果，這也是許多新的網頁設計會採用的技巧。

CSS3 opacity 屬性的功能是用來控制網頁元素的透明效果（調整不透明度），早期網頁設計常常會用到許多的透明效果，通常都是透過 png 圖層來製作透明的感覺，現在網頁設計師可以使用 CSS3 opacity 屬性來輕鬆的達到網頁元素不透明度的調整，CSS3 opacity 屬性的語法非常簡單，只需要透過數字的調整，就能呈現出不同的不透明度，進而設計出相當具有現代感的網頁風格，可應用在網頁圖片、DIV 區塊、span 區域、Table 表格 ... 等元素，所有新版的主流瀏覽器都支援 CSS3 opacity 屬性的效果。

CSS3 opacity 屬性基本語法 CSS3 opacity 屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數字越大代表元素越不透明。參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

CSS3 opacity 屬性實際範例 範例的輸出效果 範例共準備了三個加入 opacity 效果的 DIV 區塊，各位可以注意到從最上面開始的第一個區塊，不透明度為 0.1（opacity:0.1）所以整個區塊變成幾乎快看不到顏色與文字，第二個區塊不透明度設為 0.5（opacity:0.5），所以比第一個區塊清楚多了，第三個區塊再度降低不透明度到 0.8，文字與背景顏色都越更加明顯，這就是 CSS3 opacity 屬性的實際效果，由範例可以很清楚的看到，一個 DIV 區塊內的文字內容與背景顏色（background-color）都會受到 opacity 屬性的不透明度影響。

補 充：目前新版的主流瀏覽器均有支援 CSS3 opacity 屬性，但需要注意的是 IE8 以即更早版本的 IE 瀏覽器必須使用替代語法來實做，所謂的替代語法是利用 filter 屬性，寫法如「filter:Alpha(opacity=50);」，效果等於「opacity:0.5」。

CSS3 transition 屬性是一種 CSS3 的轉場效果，網頁設計師可以透過 CSS3 transition 屬性的效果來調整網頁元素變化的特效，例如 DIV 區塊尺寸改變的效果、網頁文字變色的緩慢效果，只要利用 CSS3 transition 屬性值的秒數設定，就可以輕易的創造出慢動作（Slow Motion）的感覺。不過 CSS3 的 transition 屬性在較舊版的瀏覽器並不支援，待會兒會有一個瀏覽器對 CSS3 transition 屬性支援情況的整理給各位參考，先來看這個 transition 屬性的語法規則以及參數所代表的意思有哪些。

CSS3 transition 屬性基本語法 其 實 CSS3 transition 是一個整合式的語法，包含了 property duration timing-function delay 等四個屬性值的效果，此種語法概念與 CSS 的 border 邊框設計語法有所雷同，CSS3 的 transition 屬性值也可以分別獨立出來設計，這幾個屬性值的代表意義如下：

語法	說明
transition-property	用來定義可以產生 transition 屬性效果的屬性名稱，例如寬度、背景顏色 ...。
transition-duration	用來定義 transition 屬性發生的時間，單位為秒。
transition-timing-function	用來定義 transition 效果的發生速度，可說是設定轉場時所依據的貝茲曲線。
transition-delay	用來定義多久之後開始發生 transition 效果。

➤將此四個屬性效果分開設定可以設計出非常細膩的動畫效果，若是單純的簡單動化，例如背景顏色的漸漸變化或是 DIV 區塊的簡易變形，就可以直接使用 transition 將各個屬性值表現出來。

各瀏覽器對 CSS3 transition 屬性的支援

由於 transition 屬性是個蠻新的 CSS3 功能，並不是所有的瀏覽器版本都支援，舊版的瀏覽器全部都不支援，各大主流的瀏覽器現在的最新版本都支援 transition 屬性的效果，以下為支援程度的整理，請多多參考。

• Chrome 26.0 及以上版本開始支援，語法請使用 -webkit- 開頭
• FireFox 16.0 及以上版本開始支援，語法請使用 -moz- 開頭
• Safari 6.1 及以上版本開始支援，語法請使用 -webkit- 開頭
• Opera 12.1 及以上版本開始支援，語法請使用 -o- 開頭
• IE 10.0 及以上版本開始支援

若您的目標使用族群會使用的瀏覽器在這些版本之上，支援度沒有問題的情況下，使用 transition 來設計特效就非常便利，以下我們準備了兩個不錯的簡單範例，變更 DIV 區塊的尺寸以及變更文字顏色的變化時間，程式碼都相當簡單。

CSS3 transition 屬性範例一、變更 DIV 區塊的大小
呈現效果（請將滑鼠放到區塊上） 範 例一共準備了三個不同顏色的 DIV 區塊，他們都用上了 CSS3 transition 來修改尺寸，各位讀者可以看到，這三個 DIV 區塊除了在顏色上的差異外，transition 的尺寸變化速度也有所差異，例如第一個區塊中的語法「transition:width 5s;」，意思是區塊的寬度（width）可以改變，而變化的總時間為 5 秒（5s），相較黃色區塊 3 秒以及紅色區塊的 1 秒，藍色區塊顯然變化得比較慢，因為每個 DIV 區塊一開始的寬度都僅有 60px，但是藍色區塊延長為 500px 所花的時間最長，所以速度最慢，紅色區塊所用的時間最短，所以速度最快。

範例一最重要的關鍵地方在「transition:width 秒數;」的這段語法，宣告 DIV 區塊的 transition 屬性會影響的僅有寬度（width），根據所設定的秒數而變化。如果要把 CSS3 transition 的效果用在網頁文字上又該怎麼寫呢？範例二將提供參考。

CSS3 transition 屬性範例二、文字顏色的變換
呈現效果（請將滑鼠放到範例文字上） 我 們先準備一段文字並且用 span 標籤包起來，透過 id 把 CSS 的效果套用到文字中，這裡先將文字預設為顏色藍色（color:#003399），這裡使用到的是 color（文字顏色）、font-size（文字大小）與 font-weight（文字粗細）等效果，接著設定當滑鼠移到文字上的特效，也就是 CSS 的 hover 屬性內，先把顏色設為墨綠色（color:#00DB00;），再套用「transition:color 3s;」，修改文字顏色的轉場效果，總執行時間總共 3 秒，我們可以從範例呈現的效果看到，當滑鼠移到文字上 3 秒鐘的時間，文字就從藍色漸漸變成墨綠色囉！

➤部分傳統網意設計需要用到 JavaScript 的效果，若在網友的瀏覽器有支援 CSS3 animation 動畫屬性的情況下，可以直接使用 CSS3 的 transition 屬性來處理，省去設計師額外寫 JavaScript 特效的時間成本。

CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性，CSS3 animation 有許多種不同的屬性效果可以設定，用來控制動畫的移動方式、移動方向、顏色變化 ... 等效果，功能非常的強大，CSS3 animation 屬性甚至可以達到傳統需要用 JavaScript 或 Flash 設計的動畫效果，優點是完全不需要 JavaScript 就可以設計出不太複雜的動畫，而且更具有消耗資源的優勢，如果要用 JavaScript 設計出相同效果的動畫，通常需要較為複雜的程式碼，也比較吃資源，CSS3 animation 把動畫生成的工作交給瀏覽器處理，對於動畫優化也有所幫助。

使用 animation 動畫屬性只需要設定好 animation 的屬性以及關鍵影格 keyframes 就可以很輕鬆的讓動畫跑起來，但是各家瀏覽器的支援程度還不一致，所以在 CSS 的語法中，會需要加入特別為瀏覽器所寫的字首（prefix），這個部分在範例中會看到。

基本設定一：CSS3 animation 動畫屬性語法 CSS3 animation 共有六個基本屬性可以使用，分別是 name、duration、timing-function、delay、iteration-count、direction 這六個，用來控制動畫元素的各種動畫效果，一個 animation 就可以把這六個屬性都寫完，也可以分別設計各個屬性的值，這六個屬性效果如表所示。

CSS3 animation 動畫屬性清單

屬性	說明
animation-name	定義動畫的關鍵影格 @keyframes 名稱。
animation-duration	定義動畫執行一次的時間，可以秒或毫秒為單位。
animation-timing-function	定義動畫執行的速度曲線，例如線性 linear 或低速開始。
animation-delay	定義動畫準備完成至開始動作的時間，可以秒為單位，若為 0s 表示不延遲。
animation-iteration-count	定義動畫重覆執行次數，若要無限次執行可使用 infinite。
animation-direction	定義動畫執行完一次是否需要反向執行，若要反向執行可使用 alternate。

基本設定二：@keyframes 關鍵影格的設定

關 鍵影格 keyframes 的設定可以說是 CSS3 animation 動畫效果的關鍵，若是缺少了關鍵影格的設定，動畫就跑不起來，要設定關鍵影格有兩個重點，分別是從哪邊開始跑（from）以及跑到哪裡結束（to），關鍵 影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點，0% 代表的是動畫起點，100% 則代表動畫結束點，使用 from 與 to 來設定，這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀，也就是說，除了可以利用關鍵影格來控制 animation 動畫的跑動，也可以控制動畫的顏色改變。

CSS3 animation 範例一、讓 DIV 區塊由左移至右
範例效果 範 例一呈現了基本的 DIV 區塊移動效果，CSS 語法中先對 D1 區塊設定基本的尺寸、顏色與位置，然後透過 animation 屬性設計出 5 秒重覆執行的動畫效果，關鍵影格設定區塊從左邊 0% 跑到右邊 80% 結束，紅色的 DIV 區塊從左邊開始移動到右邊，接著變回左邊開始重覆跑再一次，整個動畫效果就這樣連續不停的重覆執行著。

範例中的 animation 屬性以及關鍵影格 keyframes 前面都有加上字首（prefix），這樣的功能就是讓不同的瀏覽器能夠支援這個動畫的效果，其中「-moz-」是讓 FireFox 支援、「-webkit-」是要讓 Chrome 與 Safari 支援，都沒有加字首的是給 IE 看的，IE10 開始支援 CSS3  animation 屬性，IE9 以及更早版本的 IE 瀏覽器是不支援 animation 效果的。

CSS3 animation 範例二、讓 DIV 區塊左右來回運動
範例效果 範 例一中的紅色 DIV 區塊從左邊開始跑到右邊，又跳回左邊重新開始，這樣感覺並不流暢，如果我們讓紅色 DIV 區塊的動作改成跑到右邊接著反方向跑回左邊，這樣整個動畫就變得更流暢了，範例二的程式碼與範例一大同小異，主要的差別在使用了 animation-direction  的反方向執行效果 alternate，為了讓範例程式碼比較整潔，所以我們同樣直接把 alternate 寫在 animation 屬性裡，修改過後的紅色 DIV 區塊是不是動作變得比較流暢的感覺了呢？第一段提到過 animation 屬性不只是可以製作移動的動畫，也可以製作變色的動畫，請看範例三。

CSS3 animation 範例三、讓 DIV 區塊變顏色 範例效果 在 範例三中，我們把 DIV 區塊放大了些，看起來比較清楚，變色的重點在關鍵影格的設定，我們先看 CSS 程式碼中對 D3 區塊的設定，基本的尺寸、顏色與位置都設定好之後，開始動畫 animation 屬性的設定，這次變化時間設定為 3 秒，也是無限次執行，同樣也有反向執行，關於區塊動畫的基本設定完成後，馬上進入變色的重點，關鍵影格 keyframes 的設定，動畫開使是的效果是紅色背景顏色，動畫結束是橘色背景顏色，這樣長方形 DIV 區塊就會在紅色與橘色之間變換。

• 語法「from 」設置區塊背景顏色為紅色
• 語法「from 」設置區塊背景顏色為橘色

CSS3 animation 動畫屬性雖然剛開始使用會有點複雜，但是比起用 JavaScript 來設計這些效果，CSS3 animation 動畫屬性還是有比較多的優勢，而且稍微熟悉後，其實也相當的簡單，可以設計出比範例更多豐富的動畫效果。

CSS3 box-shadow 屬性可以用來設計網頁中各區塊的陰影效果，如 DIV、span、img 都能夠很輕鬆的設計出好看的陰影效果，至於為什麼會需要設計陰影呢？因為傳統的網頁設計比較單調，運用適當的 shadow 確實可以提升網頁整體質感，但也不宜運用過多，否則頁面混亂而失去品質，CSS box-shadow 的用法與 text-shadow 類似，不過 text-shadow 僅適用於文字陰影，box-shadow 則更適合用於區塊的設計。主流的瀏覽器如 FireFox、Chrome、Safari、Opera 等都有支援 box-shadow 屬性，而 IE9 以及更早的 IE 版本並未支援。

CSS3 box-shadow 基本語法 與 text-shadow 比起來，box-shadow 可以設定的參數多了許多，可以呈現的結果也比較多樣化。

• inset：用來設定內陰影，選擇性項目，無填寫代表呈現為外陰影。
• offset-x：x 軸方向的陰影大小，單位為長度單位，如 em、px 等。
• offset-y：y 軸方向的陰影大小，單位為長度單位，如 em、px 等。
• blur-radius：模糊半徑，選擇性項目，未填寫則為預設值零。
• spread-radius：擴散半徑，選擇性項目，未填寫則為預設值零。
• 陰影顏色：必要項目，自行決定陰影的顏色。

運用以上的各項參數去設計，以下準備幾的簡單的範例參考。

CSS3 box-shadow 範例一：簡易 DIV 陰影 範例呈現效果
為了讓範例呈現比較清楚一點，所以我們對 DIV 做了一點設計，包含寬度 width、line-height、text-align 等，但重點還是在於紅色標住的陰影設計，水平與垂直方向都給 3px 的距離，模糊範圍給 12px 的距離，就可以呈現出這樣的柔美效果。

CSS3 box-shadow 範例二：DIV 內陰影 inset 範例呈現效果 在 box-shadow 屬性的開頭加上 inset 的意思就是陰影效果為區塊內陰影，區塊外並不會有什麼效果出現，但區塊內就很漂亮。

CSS3 box-shadow 範例三：為圖片加上陰影效果 範例呈現效果 為圖片加上陰影也是相當的簡單，但不能設定圖片的內陰影，亦即 inset 在圖片上是沒有效果的。

CSS3 text-shadow 用來設計文字陰影效果，通常我們會用在網頁標題上，增加視覺效果，另外也可以用在一些藝術字型的設計，讓你不需要透過 GIMP 或 Photoshop 這類繪圖軟體也可以輕鬆做出 shadow 效果。text-shadow 獲得幾乎所有主流的瀏覽器支援，但在 IE9 及更早版本的 IE 瀏覽器並不支援 text-shadow 屬性，大部分主流瀏覽器如 FireFox、Chrome、Safari、Opera 等都有支援 CSS3 text-shadow 屬性。

CSS3 text-shadow 基本語法 CSS3 text-shadow 的屬性共分為 X 軸方向的陰影、Y 軸方向的陰影、模糊範圍、陰影顏色這四個部分，每個部分由半形空白隔開，意思是可以分別設定文字在水平與垂直兩個方向的陰影，第三個＂模糊範圍＂是選填項 目，但沒有設定的話，可能會比較不柔和，請自行比較看看哪個輸出結果比較符合網頁風格，前三個參數的單位為長度，可以是 em、px 等，最後一個陰影顏色也是必填項目。

CSS3 text-shadow 範例 呈現結果如：CSS3 shadow 陰影效果

範 例中我們將 X 軸、Y 軸以及陰影範圍都設定為 3px，顏色採用淺灰色（色碼為 #cccccc）所製做出來的柔和陰影效果，是不是比較有立體感了呢？這個特效在 IE9 以及更早版本的 IE 瀏覽器看不到。假設我們將第三個屬性取消掉，就會顯得比較粗糙一點，就像下面這樣。 呈現結果如：CSS3 shadow 陰影效果

CSS3 text-shadow 範例二：暈染效果 呈現結果如：CSS3 shadow 暈染陰影效果

我 們將 X 軸與 Y 軸方向陰影都先設為零，陰影範圍控制在 15px，顏色選擇淡紫色（色碼為 #FF37FD）就可以創造出這樣的暈染文字陰影效果，以往這樣的效果都必須在繪圖軟體先處理好，現在有了 CSS3 text-shadow 真的很方便，不過 text-shadow 僅能處理文字，若要處理區塊的陰影效果，請使用 CSS3 box-shadow 屬性。

CSS3 shadow 可以用來創造出陰影效果，適用於某區塊（如 DIV、span、img）或文字的陰影設計，省去傳統必須用圖檔先製作好陰影效果的工作，直接透過 CSS3 shadow 來完成，常用的兩種陰影效果可以分為 box-shadow 與 text-shadow，其中 box-shadow 用來設計單一區塊的陰影效果，而文字的陰影效果則透過 text-shadow 來設定，只不過目前的 IE 最新版本 IE8 並不支援 CSS3 shadow 特效，必須使用其他方式讓 IE 瀏覽器呈現效果，FireFox、Chrome、Safari、Opera 等瀏覽器是有支援的，以下提供兩個簡單範例參考。

一、CSS3 box-shadow 範例 用 box-show 對 span 做陰影呈現效果如

CSS shadow 區塊陰影效果

CSS3 box-shadow 還可以對圖片或 DIV 區塊製作陰影效果，請參考：CSS3 box-shadow。

二、CSS3 text-shadow 範例 用 text-shadow 對文字做陰影呈現效果如

CSS3 shadow 文字陰影效果

由此範例中，我們運用 text-shadow 技巧將文字增加了粉綠色的陰影效果，兩個範例比較後，可以看出對區塊做陰影的方式與對文字做陰影的方式雖然類似，但實際上並不相同，請參考詳細文字陰影解說：CSS3 text-shadow。

CSS3 圓角 border-radius 用來設定區塊的圓角效果，可以一次設定四個圓角的值，也可以分別對各個圓角設定不同的値。

基本語法

border-radius：圓角值;

在此基本語法範例中，圓角值可以自行設定，馬上來看一個簡單範例

<div style="border:2px #ccc solid;border-radius:10px;width:360px;height:60px;background-color:#eee;">CSS3 border-radius 圓角範例</div>

呈現結果
此範例我們設定了 border-radius:10px 這樣的圓角值（紅色部分），而且四個角都是一樣的效果呈現，另外我們還使用了其它的語法，像是 DIV 的 width（寬度）、height（高度）、background-color（背景顏色）與 border（邊框）等，目的僅是要讓範例呈現明確的效果而已，大部分的應用看到這裡應該就夠用了，但如果你需要進一步，分別設定四個角不同的値也可以。

四個角的語法

• border-top-left-radius - 設定左上角
• border-top-right-radius - 設定右上角
• border-bottom-right-radius - 設定右下角
• border-bottom-left-radius - 設定左下角

在 CSS3 圓角設定的時候，可以採用的値有 % 或是長度單位，請自行嘗試看看。