今までは複雑なテーブルを組むなどの必要があったが、CSS によって複雑な枠線が手軽に扱えるようになった。今回はその応用としてドット(丸い点)による枠線を作る。
01 .dotBorder
02 {
03 border-style:dotted;
04 border-top-color:yellow;
05 border-bottom-color:green;
06 border-left-color:blue;
07 border-right-color:red;
08 border-width:10px;
09 height:100px;
10 width:200px;
11 }
今回は純粋にCSSだけで処理をしています。 DIVタグにclassを設定し、そのclassに対して上記のようにスタイルを設定しただけで、DIVタグには他には何もしていません。
枠線のスタイルを指定します。このプロパティの初期値は none で、この場合枠線は表示されません。
色を、上・下・左・右の順でしてしています。
枠線の幅を指定しています。ドットの直径はこのプロパティの値によって決まります。 この値が小さいときちんとした円にならないようで、一部が欠けてしまいました。
枠のサイズを縦100ピクセル、横200ピクセルにしています。