枠で囲む

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


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


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

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

9行目〜12行目 の部分は文字と枠との余白(数が大きい程枠が広い)


枠で囲み色で覆う

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


↓のソースを<HEAD>〜</HEAD>の間に貼り付けて下さい。
16行目 background-color の部分の色が覆う色になります。



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






HOME