【轉載】CSS3相關文章

CSS3帶來了意想不到的方便，許多以往需借用繪圖軟體把字套用我們想要的字型後，需做成圖片，顯示在網頁上，才不會離了我們想要的效果，但css3不僅僅支援了網路字型，更有其他不錯的效果，讓網頁的呈現更為豐富。

筆者看到css3的出現，只有「我心狂喜」四個字來形容。真的感謝 CSS創始人Hakon Wium Lie 創造了這麼好用的css3讓網頁可以變得美美的，而不是一成不變。

需要注意的是，各瀏覽器的版本，是否有支援css3喔~要不然小叮噹會變成方塊叮噹XD

(奎.Ke.2010/05/17)

以下，有興趣的人，到各文章慢慢品嚐css3帶來的嚮宴。

---

1. 【O專欄】CSS3：網頁外觀新衝擊之圖像背景加工篇(按我前往網頁)

文章引言：「
筆者針對CSS3介紹了網路字型，也就是直接在網頁程式碼中指定存在網路上的字型，便可呈現出在任何平台、任何支援瀏覽器下都一樣美觀的字體。為了讓大家充分利用CSS3的特性，這次要介紹如何修飾圖像邊緣（border）與背景（background）。

過去網頁設計者要將圖像加工，例如在邊界修圓角，經常需要藉助第三方軟體，如Photoshop等工具來修圖。有時候我們想對文字做些立體效果，像是加上陰影，還是得靠PS來修，然後把這些文字轉換為圖像後再上傳，沒辦法直接以程式碼辦到。（Photoshop一套可不便宜！）

CSS3在這一方面做了嘗試，能直接透過CSS代碼來對圖像、文字做出修飾，讓常要作的網頁外觀設計變得更簡單、幾行代碼就能完成。W3C規範對提出了各種不同的功能與外觀修飾語法，今天就來介紹幾個設計者在作圖像加工時常會用到的：「圓角加工（border－radius）」、「陰影加工（box-shadow）」與「拼接背景圖像（multiple background）」。

雖然大部分的主流瀏覽器都已經支援borders和background語法，但由於CSS3還在規劃中、尚未定案，所以有些瀏覽器會使用自己的語法。比方Firefox是-moz-border-radius，Safari與Chrome的Webkit引擎則是-webkit-border-radius。為了避免讓設計者因為配合不同的語法而要寫一堆額外的程式碼，Opera則直接採用最標準的語法，去除指令前瀏覽器的代稱。但在W3C對CSS3標準還沒完全規範之前，如果要使用CSS3語法，又想要所有的支援CSS3的瀏覽器都可以正常支援的話，最好還是將這三種語法都寫進去比較保險。
」

2. 詳細規範請見：W3C組織CSS3背景與圖像邊緣的完整語法規範（英文）

3. 跨瀏覽器 CSS3 代碼生成器

4. IE-CSS3 讓 IE 支援 CSS3

5. 【O專欄】CSS 3：網頁外觀新衝擊之字型篇
文章引言：
「
範例１：如何在CSS上套用網路字型
範例２：如何在SVG上套用網路字型
範例３：網路字型也可做特效

CSS 3的網路字型可以讓設計師擺脫以往受限於系統字型，提供多種不同的字型選擇，讓網頁整體設計活潑、富有變化。網路字型可以單獨被使用，同時也可以在如 SVG的圖形下使用，並製造特效，讓網站設計更突出、更具風格。目前最新版的瀏覽器中，Apple Safari（Webkit引擎）、Firefox以及Opera 皆已逐步支援CSS 3中網路字型這項屬性。

」

6. 網路字型的應用文章（英文版）