アウトラインのレンダリング

<style type="text/css"><!--
.eg1:focus {outline:#99d0f6 dotted medium;}
.eg2:focus {outline:#bffa60 dashed medium;}
.eg3:focus {outline:#edc4fc solid medium;}
.eg4:focus {outline:#99d0f6 inset medium;}
.eg5:focus {outline:#bffa60 outset medium;}
.eg6:focus {outline:#edc4fc double medium;}
.eg7:focus {outline:#99d0f6 dashed medium;}
.eg8:focus {outline:#bffa60 groove medium;}
.eg9:focus {outline:#bffa60 ridge medium;}
--></style>

<form action="cgi-bin/act.cgi" method="post" enctype="multipart/form-data">
<table>
<tbody>
<tr>
  <td><label for="r1">お名前</label></td>
  <td>： <input type="text" id="r1" name="n1" class="eg1"></td>
</tr>
<tr>
  <td><label for="r2">パスワード</label></td>
  <td>： <input type="password" id="r2" name="pw" class="eg2"></td>
</tr>
<tr>
  <td><label for="r3">ファイル</label></td>
  <td>： <input type="file" id="r3" name="f1" class="eg3"></td>
</tr>
<tr>
  <td>趣味</td>
  <td>： <input type="checkbox" id="r4" name="hobby" value="read" class="eg4"> <label for="r4">読書</label>
  <input type="checkbox" id="r5" name="hobby" value="pc" class="eg4"> <label for="r5">パソコン</label>
  <input type="checkbox" id="r6" name="hobby" value="ride" class="eg4"> <label for="r6">乗馬</label>
</td></tr>
<tr>
  <td>性別</td>
  <td>： <input type="radio" id="r7" name="sex" value="male" checked class="eg5"> <label for="r7">男性</label>
  <input type="radio" id="r8" name="sex" value="female" class="eg5"> <label for="r8">女性</label>
  <input type="radio" id="r9" name="sex" value="secret" class="eg5"> <label for="r9">それはいえない</label>
</td></tr>
<tr>
  <td><label for="r10">ブラウザ</label></td>
  <td>：
  <select id="r10" name="navi" class="eg6">
  <optgroup label="Internet Explorer">
    <option selected>Internet Explorer 8.X</option>
    <option>Internet Explorer 7.X</option>
    <option>Internet Explorer 6.X</option>
    <option>Internet Explorer 5.X</option>
  </optgroup>
  <optgroup label="Mozilla Firefox">
    <option>Mozilla Firefox 3.X</option>
    <option>Mozilla Firefox 2.X</option>
    <option>Mozilla Firefox 1.X</option>
  </optgroup>
  <option>その他</option>
  </select>
</td></tr>
<tr valign="top">
  <td><label for="r11">メッセージ</label></td>
  <td><div style="float:left">： </div><textarea name="msg" rows="5" cols="50" id="r11" class="eg7"></textarea></td>
</tr>
<tr>
  <td colspan="2" align="center"><input type="button" value="送信" class="eg8">
  <input type="reset" value="リセット" class="eg9">
</td></tr>
</tbody>
</table>
</form>

<style type="text/css"><!--
a.eg1:hover {outline:#99d0f6 solid thick;}
a.eg2:hover {outline:#bffa60 solid 8px;}
a.eg3:hover {outline:#edc4fc dashed 16px;}
a.eg4:hover {outline:#99d0f6 dotted thick;}
--></style>

<a href="#" class="eg1">いや、何となく複数行に亘る<br>リンクのアウトラインに興味があったのである。</a><br><br>
<a href="#" class="eg2">そのような訳で、<br>このようなサンプルを用意し対応ブラウザにおいて一寸遊んで見る事にした。</a><br><br>
<a href="#" class="eg3">Firefox3では長方形が重なり合い文字が読めない。<br>しかしながら、Google Chrome2、Opera9、Safari3では複数行テキストを取り囲む見事な多角形を描き出している。</a><br><br>
<a href="#" class="eg4">なんと、<br>Internet Explorer8も多角形を描き出しているではないか。</a>

<style type="text/css"><!--
.eg1 {outline:#edc4fc dotted thick;}
.eg2 {outline:#edc4fc dashed thick;}
.eg3 {outline:#edc4fc solid thick;}
--></style>

<img src="img/map1.gif" alt="map" width="240" height="80" border="0" usemap="#m1">
<map name="m1">
  <area shape="rect" coords="10,10,70,70" href="#" alt="rect" class="eg1">
  <area shape="circle" coords="120,40,30" href="#" alt="circle" class="eg2">
  <area shape="poly" coords="196,9,171,31,179,66,213,70,227,33" href="#" alt="pentagon" class="eg3">
</map>