画像の周りなどに1pxの破線を引く

画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。
borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？

その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。

ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。

---- こっから続き

取り合えず下記を見て下さい。

1. 
2. 

1番の画像は、背景画像を使っているので枠線はどの環境で見ても同じです。
2番の画像は、borderで見せているので、ブラウザによって表示が違います。

では、やり方。

img.tenten {
 background:url(../img/dotted.gif);
 padding:1px;
}

paddingを1pxとり、背景画像をおいて上げるだけです。
その際に用意する画像がポイント。

↑コレです。
ちょっと実寸だと分かり難いので、でっかい画像を。

おわかりの通り、画像の裏は斜線で埋まってると思います。
応用すれば中々幅が広がると思います。

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•