之前，筆者針對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的瀏覽器都可以正常支援的話，最好還是將這三種語法都寫進去比較保險。
1. 圓角加工（border-radius）
設計者經常把這個功能叫做Rounded Corners。顧名思義，它就是要給圖像製造圓角。早期要做圓角，必須把圖像切成小塊然後在影像軟體中作修改，之後再用div把這些小塊圖像接回，費時又費力。現在有了CSS3，就可以直接用border-radius做出圓角效果，下面是各種不同圓角的程式碼，給各位作為參考。
2. 陰影加工（box-shadow）
box-shadow語法則是給圖像製造影子。以下是各種不同陰影造型以及圓角加陰影的程式碼範例。
3. 拼接背景圖像（multiple background）
如果有兩張以上的圖像想要在網頁上併在一起的話，就可以直接使用CSS3的multiple background進行拼貼。套用CSS3後看起來圖像雖然是重疊的，而實際上卻都獨立存在。以下是試作範例：
總結：
CSS3的修飾圖像邊緣（border）與背景（background）幫網頁設計者簡化很多本來一些可能瑣碎但費時的工作。現在變得簡單多了，而且能讓圖像達到更好的效果。
參考資料：
請注意！留言要自負法律責任，相關案例層出不窮，請慎重發文！