Home/Menu

スタイルなCSSの基礎講座

アウトライン

◆ はじめに

つぎは、アウトライン系のプロパティです。

尚、ご使用のブラウザのスタイルシート対応度によって、表示が異なる場合があります。

◆ アウトライン関係

outline-colorプロパティ

outline-colorプロパティは、ボタンや画像などの縁取り線の色を設定します。
ちなみに、ボーダー線とは異なり、上下左右の概念はありません。
対象が丸ければアウトラインも丸くなります。
設定値は、色(任意の色)、invert(地の色を反転)。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素invertnoMac-IE5が対応しているらしい

outline-styleプロパティ

outline-styleプロパティは、ボタンや画像などの縁取り線の形状を設定します。
設定値は、以下の通りです。

none
アウトラインを表示しません。
solid
アウトラインを実線で表示します。
double
アウトラインを2本線で表示します。
その他
groove,ridge,inset,outset,dashed,dottedがあり、いろいろ試して見て下さい。
適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素nonenoMac-IE5が対応しているらしい

outline-widthプロパティ

outline-widthプロパティは、ボタンや画像などの縁取り線の太さを設定します。
設定値は、実数値+単位,thin(細い),medium(普通),thick(太い)があります。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素mediumnoMac-IE5が対応しているらしい

outlineプロパティ

outlineプロパティは、ボタンや画像などの縁取り線の上記一括指定で設定します。
設定値は、上記の必要な値を任意の順にスペースで区切って指定します。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
全要素個々のプロパティの初期値noMac-IE5が対応しているらしい
ちゃいちゃん ちゃいちゃん ちゃいちゃん ちゃいちゃん ちゃいちゃん

outline系のプロパティは、現状(2001/06/19)では、MacIE5でサポートされているだけみたいです。

----------CSS2 ソース------------------------------------------------
img.outlinesmp1 {
    outline-style: solid;
    outline-color: #ff0000;
    outline-width: thick;
}
img.outlinesmp2 {
    outline-style: double;
    outline-color: #00ff00;
    outline-width: medium;
}
img.outlinesmp3 {
    outline-style: groove;
    outline-color: #0000ff;
    outline-width: thin;
}
img.outlinesmp4 {
    outline-style: outset;
    outline-color: #888888;
    outline-width: 4px;
}
img.outlinesmp5 {
    outline-style: dotted;
    outline-color: #444444;
    outline-width: medium;
}
---------- HTML4.01 ソース ------------------------------------------
<img class="outlinesmp1" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp2" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp3" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp4" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<img class="outlinesmp5" src="../chaiimg/chaichan_ani.gif" alt="ちゃいちゃん">
<br>
<p class="chuui">
outline系のプロパティは、現状(2001/06/19)では、MacIE5でサポートされているだけみたいです。
</p>

Home/Menu/スタイルシート概説リファレンス