「写真等の画像をいかに上手くスタイル付けしてあげられるか」を日々模索しています。
そんな中、これはなかなか面白いのでは？と思ったスタイルシートのプチテクニックをご紹介します。

とはいったものの、そんなたいそうなものじゃありません。プチプチプチテクニックです！！
実際に見ていただくのが一番良いですね。

サンプル

サンプル1では白系の背景に使えそうなものをスタイルし、サンプル2では黒系の背景に使えそうなものをスタイルしています。

スタイルシートのソースは以下になります。

1.白系の背景にフィットしそうな画像の装飾

#main #cover img {
	background: #fff;
	border: 3px double #ddd;
	margin: 5px;
	padding: 3px;
}

2.黒系の背景にフィットしそうな画像の装飾

#main #cover2 img {
	background: #333;
	border: 3px double #ccc;
	margin: 5px;
	padding: 3px;
}

「border: double」というところが肝になります。
いかがでしょう？すこーしだけ豪華な気がしませんか。（・・・私だけでしょうか・・・（笑））

FF,Safari,IE6、7、8でも差異なく表示出来ます。
※ただし、IE6の表示モードが後方互換モードの（xml宣言ありの）場合は、img要素にpaddingを設定しても反映されないので、注意が必要。

また画像の装飾に関して面白そうな表現を見つけましたら記事にしますね！
以上、[CSS]画像をほんのちょっぴり豪華にするスタイルシートのプチテクニックでした！

こちらもあわせてどうぞ！

• jQueryを使用してボックスを上下左右中央に配置する
• [jQuery]3階層以上のドロップダウンメニューを表示する「droppy」！
• [jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu
• [jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！
• JQueryでサブ（階層）メニューを表示する