一直很喜歡"Orpheus in the Blog"的版面 素潔雅淨
其中圖片加框的視覺感更是我一直想仿效的
不過因為要透過樣式表來設定 而我跟它並不太熟
得花不少時間進行了解、溝通
所以之前便一直懶得動手

上禮拜幫avant改版
那blog完全是以他的攝影作品為重點 其中又有許多黑白照片
三不五時便會發生照片的白色角落與版面的白色背景融為一體的狀況
越看越覺礙眼
於是硬著頭皮開始找資料 研究起這貼圖自動加框法
最後也順利達成任務

其實這事不難
不過因為我對CSS語法並不了解 又一直有點懼怕
無法像別人一次搞定
只能一步一腳印地去找資料、研讀、嘗試、調整 一改再改
所以即使只是一個簡單的效果設定
最後竟然也花掉將近兩個小時

總之 最後我主要是參考了"实现CSS图片边框效果的方法"與"配置文繞圖"兩篇教學
在自己這blog（架設於MT系統）的樣式表裡加上這段控制碼：

.content img.frame3 {border: 1px solid #CCCCCC; padding: 3px;}
.content img.frame5 {border: 1px solid #CCCCCC; padding: 5px;}
.content img.frame7 {border: 1px solid #CCCCCC; padding: 7px;}
.content img.frame10 {border: 1px solid #CCCCCC; padding: 10px;}

另外 在上面那段控制碼當中
除了框線粗細、顏色或間距 還可以自行變化、加入一些設定
比如把solid（實線）改成dotted（虛線）
或者再加個"background-color: #??????"來設定圖片的底色（比如黑色襯底加上白色框線）
有興趣的人就請自己去一步一腳印吧

加上這段控制碼之後的使用方式與呈現結果 用文字來講解有點麻煩
我把語法和圖片直接秀給大家看好了
應該不難看懂

語法：
<img src="http://blog.bluecircus.net/archives/BClogo.gif" class="frame3">
呈現結果：

語法：
<img src="http://blog.bluecircus.net/archives/BClogo.gif" class="frame5">
呈現結果：

語法：
<img src="http://blog.bluecircus.net/archives/BClogo.gif" class="frame7">
呈現結果：

語法：
<img src="http://blog.bluecircus.net/archives/BClogo.gif" class="frame10">
呈現結果：

至於在avant那個blog（開在養樂多）的樣式表裡
我則是加入以下這段控制碼：

img.frame {border: 3px solid #000000}

至於這段控制碼要加在哪裡
我試了一下 似乎加在哪裡都沒關係
但為了編輯方便
我還是建議加在樣式表原有的"img {...}"之下

其實似乎還可以利用CSS來設定一些更高段的效果
比如為圖片襯上一個暈邊的外框之類的
不過太麻煩了 我沒繼續研究下去
那會要了我這懶人的命:p

對了
這些東西其實不難
有意跟進但卻遇到問題的話
請自行到股溝裡找解答比較有用
肉腳湯姆我懂的都已經說了
在這裡提問 我恐怕也是愛莫能助
請見諒:p