主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

CSSと画像で、気の利いた点線ボックスを作る

ボックスにドットのボーダーつけると、ブラウザによって微妙にドットの種類が変わります。

知ってたけども、最近、改めて「おっ」と思ったのは、

background:url("../images/bg_dot_white.gif") 0 0 #ボーダー色;

という感じで、ボックスに白い斜線の背景をつけて、さらに背景色を指定すると、その背景色のドット・ボーダーになる、という点線のつけ方です。

黒い斜線ではなくて、白い斜線、というところがミソです。

これなら、白背景のところならCSSを変えるだけで色変更ができ、どんなサイズにも対応できますし、どのブラウザで見ても同じ点線になります。

(↓こんな感じ ※画像です)

若干、角が変になるのはご愛嬌。