(設計: +Totoa Hari, 素材: goo.gl/x6WzZC)如能善用 CSS 語法，不需要使用影像編輯軟體，也能讓圖片輕鬆做出「外框 + 陰影」的效果。不過使用 CSS 做出簡單的陰影很容易，要做出不錯的立體感就稍微困難一些。
另外，要在單一圖片使用 CSS 效果很容易，要找出特定範圍來一併套用 CSS 效果就麻煩一些(例如指定文章區塊)；又，文章內可能不是每張圖都適合加框、上陰影，這也得另外來處理。
以下先舉例沒使用 CSS 的情形，再簡單示範一個效果不錯的立體陰影 CSS 效果，並說明如何排除特定圖片、不使用陰影效果的方式。
一、使用影像編輯軟體
1. 若是對 CSS 不熟，一些立體陰影效果只能藉由影像編輯軟體才能完成，這樣處理部落格圖文的時間就會拉長，例如下面這張圖的效果，就是使用後製完成的──
上圖左下、右下角模擬紙張翹起的立體陰影，其實可以利用 CSS3 語法做到，不過較為複雜，會在下一篇介紹。
2. 本站文章開頭的示意圖，使用了模擬紙張下方凸起的立體陰影效果，例如下面這張圖──
這就不是使用影像編輯軟體後製，而是使用 CSS3 語法。只要對著圖片按下、另開視窗就可看到原始圖片，沒有任何陰影效果。由於較為複雜，一樣在下一篇文介紹。
3. 本站內文使用的圖片，效果類似下圖──
這也是使用 CSS 語法產生的立體陰影，可另開視窗看原始圖片，本文將以此效果舉例。
二、找出要套用 CSS 的區塊
如果為圖片標籤 img 設定 CSS 陰影，將會導致全網頁圖片都套用此效果，例如以下：
<style>
img {
box-shadow: 1px 1px 1px #ddd;
}
</style>因此必須限定特定區域的圖片標籤 img 才套用 CSS 陰影。以 Blogger 的為例，在範本中內文區塊的 class 為 "post-body"，所以可以設定如下：
<style>
.post-body img {
box-shadow: 1px 1px 1px #ddd;
}
</style>如此將只有內文區塊的圖片，才會套用此 CSS。如果非 Blogger 平台，可參考這篇文章「Chrome 開發人員工具」的操作方法，來找出內文區塊的 class 或 id，就能設定 CSS 了。
三、不錯的立體陰影 CSS 設定
接著以下圖為例，將這個效果的 CSS 放入範本中。(請注意:IE8(含)以下不支援CSS陰影語法，建議參考這篇文章、並在部落格宣導「建議避免使用 IE8(含)以下瀏覽器」)
以 Blogger 來說明，要將效果套用到內文區塊的所有圖片，請到後台範本 → 編輯 HTML → 搜尋字串
.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);
}如果不想用預設效果，想使用本文效果，請改為以下：
以上黑色字串為原程式碼，有顏色的字串為新增的程式碼。儲存後，所有在文章中的圖片將自動套用此立體陰影效果。
以下說明請參照程式碼行號──
B、L：B 行的紅色字串 "/*" 與 L行的紅色字串 "*/" 代表將中間的黑色字串(預設程式碼)註解掉，使其不執行。範本中的所有預設程式碼都不建議刪除，方便將來還原之用，請參考這篇「Blogger 範本__(一)各種註解方式及區塊的修改」→「一、範本註解方式」的說明。
N～P：藍色字串為外部陰影的語法、綠色字串為內襯陰影的語法；一般只使用藍色字串的語法，不過本文的效果使用綠色字串後，立體效果更佳，可模擬紙張邊緣的光線效果。
Q：設定紙張邊緣(外框)的寬度，8px可改為自訂數值。
R：設定背景色為 "白色"(#fff) 時的光線效果，也可自訂為其他顏色。
S：不使用框線
四、放在自訂區塊的 CSS 程式碼
「三、不錯的立體陰影 CSS 設定」的說明是使用 "修改" 範本程式碼的方式，不過如果在範本沒有搜尋到 ".post-body img" 這樣的字串，或是想要將 CSS 程式碼套用到自訂的區塊，那就得用 "新增" 程式碼的方式。
請在範本中搜尋
.post-body img {
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding: 8px;
background: #fff;
border: none;
}以上紅字 ".post-body" 可改為自訂區塊的 class 名稱。
修改說明請參照「三、不錯的立體陰影 CSS 設定」。如果對程式碼熟悉的話，以上程式碼請自行放到範本中的 CSS 區段比較利於管理。
五、特定圖片排除陰影效果的方式
有的時候某些內文圖片是不需要加特效的，例如一行文字裡面穿插小圖示(參考這篇「Blogger 網誌清單的妙用＋網站小圖示的調校」)、使用圖片式標題(參考這篇「為健康把關的57堂課__飲食篇」)等等。對於出現頻率比較低的情境，可以為這些圖片另外設定 class 來套用，以下為步驟：
1. 在範本中
<style>
.no-shadow {
padding: 0px;
box-shadow: none;
background: transparent;
border: none;
}
</style>以上 "no-shadow" 可改為自訂的 class 名稱，套用這個 class 的圖片將消除所有陰影效果、背景顏色、邊框等等。
2. 接著在文章中不想使用陰影的圖片，記得在 img 標籤內加入 "no-shadow"(或自訂字串) 這個 class 名稱，例如以下範例：
<img class="no-shadow" src="http://4.bp.blogspot.com/-9aoXd1tS9cA/UqKQoSBPbqI/AAAAAAAAIWM/p9kZ3LemOu8/s1600/blogger-community-xmas-one-year.jpg"/>如此這張圖片將沒有任何額外效果，如下圖：
六、小結
以上看起來內容很多，其實要操作的步驟並不多，而且只要做一次便可以一勞永逸，所有文章內的圖片都可自動套用陰影效果。本文是比較簡單、入門的範例，下一篇將介紹更立體的 CSS 語法，操作上更進階，但效果絕對令人炫目。