枠で囲む

カーソルを重ねてみてね♪

↑こんなカンジでリンク部分の文字を枠で囲みます♪


↓のソースを＜HEAD＞〜＜/HEAD＞の間に貼り付けて下さい。

<STYLE type="text/css"><!-- A:HOVER{ border-top-style : solid; border-left-style : solid; border-right-style : solid; border-bottom-style : solid; border-color : #7d9a7c #7d9a7c #7d9a7c #7d9a7c; border-width : 1px 1px 1px 1px; padding-top : 1px; padding-left : 1px; padding-right : 1px; padding-bottom : 1px; } A{text-decoration : none;} BODY{line-height : 15px;} --> </STYLE>

3行目〜6行目　solid　の部分を変えると線の種類も変わるよ！
　　　　　　　　　　　　dotted　・・・ ドット点線　　dashed --- 点線
7行目 border-color の部分は枠の色　(4つあるのは1辺1辺の色です)
　　　　　　　　　　　全種類の色を違う色にするとカラフルな枠で囲むよ！
8行目 border-width の部分は線と太さです(数が大きい程線も太い)
9行目〜12行目 の部分は文字と枠との余白(数が大きい程枠が広い)

枠で囲み色で覆う

上段のソースの間に
A:HOVER{ background-color : #dae6d9; }
を追加すると枠と同時に枠内を色で覆います。

↓のソースを＜HEAD＞〜＜/HEAD＞の間に貼り付けて下さい。

<STYLE type="text/css"><!-- A:HOVER{ border-top-style : solid; border-left-style : solid; border-right-style : solid; border-bottom-style : solid; border-color : #7d9a7c #7d9a7c #7d9a7c #7d9a7c; border-width : 1px 1px 1px 1px; padding-top : 1px; padding-left : 1px; padding-right : 1px; padding-bottom : 1px; } A{text-decoration : none; } A:HOVER{background-color : #dae6d9;} --> </STYLE>

16行目　background-color の部分の色が覆う色になります。



色んな組み合わせでさまざまなバリエーションがあるので
その他の『リンクあれこれ』も見てみて下さいね♪