画像の枠を額縁風にデザインする

線でボックスを囲むborderプロパティにはさまざまな種類があります。その中のinsetとoutsetの値を使用すれば、美術館にある絵画の額縁のような枠線を表現できます。
ボックスにあるbackgroundプロパティに画像を指定すれば、画像の周囲に額縁がついたように見えて、手軽にデザイン性を高めることができます。

しかしこの手法には落とし穴があります。ＩＥではwidthプロパティやheightプロパティとborderプロパティを併用すると、それらがborderプロパティ込みのサイズとなってしまいます。
ですから、この手法を使う場合は、widthプロパティやheightプロパティを併用しない方がいいです。どうしても併用したい場合は、横縦幅サイズを指定するプロパティとborderプロパティを別々に記述するなどした方がいいでしょう。

デザインサンプル

frame01
frame02

サンプルCSSコード

#frame01 {
　　border: outset 10px #bb0000;
　　padding: 4px;
}

#frame02 {
　　border: inset 10px #cccc00;
　　padding: 4px;
}

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.