[CSS]讓無名文章的圖片自動產生邊框

●視覺加分！



我不習慣用無名相簿，網誌裡的圖片大多是放在Flickr裡，以前時間比較多，還會對圖片的做邊框處理。但現在比較忙，我想多花點時間充實文章內容，但又喜歡像Blogspot裡的文章圖片自動加上優質邊框的感覺，要怎麼做呢？



很簡單，在你的CSS語法裡加入以下的語法就行了（紅字部分）



/* 文章內圖片外框 顏色：灰　粗細：1px　樣式：實線　邊框空白距離：6px */

                                                                   

.innertext p img{                                         

                border:1px solid #C0C0C0; 

                padding:6px;                               

                margin-bottom:0px;              

                margin-top:0px;                          

                }                                                 

                                                                       



語法說明



主要用到的是border及padding這二個屬性，邊框線的粗細、樣式、顏色都可以依自己的網頁風格加以調配。而margin的部分則是依個人喜好決定，想讓文字離圖片的距離有個完美比例，就調整一下吧。我是習慣用段落隔開了…orz，以下是細部語法說明。



border: 邊框設定。1px→邊框粗細。solid→邊框樣式。#C0C0C0→色碼

padding:元件和邊緣的距離。

margin-bottom:文字和底部邊緣的距離。

margin-top:文字和頂部邊緣的距離。



另外推薦大家在修改CSS樣式表時，養成加上註解的習慣，方便以後修改，註解並不會影響網頁樣式。其寫法如下



 /*  註解文字  */