[CSS3 を使ってみる：第九回] ボックスの周りに border とは違う枠を設定する(outline・outline-offset)

outline を使うと、ボックスの周りに border とは違った枠線を設定できるみたい。

以下は div (id: outline、width: 200px、height: 100px) のから 3px 離れたところに 1px・破線・透明度 50% の青い線を設定した場合。

#outline {
  outline: 1px dashed rgba(0, 102, 255, .5);
  outline-offset: 3px;
}

すると、ボックスの外側 3px のところに枠線ができている。ちなみにこのボックスには黒の border を設定してある。


この outline を hover に使えば、こんな感じになる。下記ブラウザで閲覧されている方は、マウスをこの「outline」と書いてあるボックスにあわせると青い線が出てくると思う。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C：
CSS3 Basic User Interface Module