画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。
borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね?
その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。
ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。
取り合えず下記を見て下さい。
1番の画像は、背景画像を使っているので枠線はどの環境で見ても同じです。
2番の画像は、borderで見せているので、ブラウザによって表示が違います。
では、やり方。
img.tenten { background:url(../img/dotted.gif); padding:1px; }
paddingを1pxとり、背景画像をおいて上げるだけです。
その際に用意する画像がポイント。
↑コレです。
ちょっと実寸だと分かり難いので、でっかい画像を。
おわかりの通り、画像の裏は斜線で埋まってると思います。
応用すれば中々幅が広がると思います。