【ボックス】border [リファレンス]
説 明
ボックス要素の枠線を指定します。
使い方
▼ 一括設定
border: A B C;
▼ 個別設定
border-top: A B C;
border-right: A B C;
border-bottom: A B C;
border-left: A B C;
A:枠線の太さ
B:枠線のスタイル
C:枠線の色
解 説
A:枠線の太さ
数値+単位 で指定します。単位は主に「px」を用います。
初期値は「medium(普通)」で、ブラウザによって太さが異なります。
B:枠線のスタイル
次のキーワードが設定可能です。但し、ブラウザによって見え方が異なります。
初期値は「none(枠線なし)」です。
none(初期値)、solid、double、dotted、groove、ridge、inset、outset
ソースコード:none(枠線なし)
bbb1 {
border:none;
}
border:none;
}
表示例:none
枠なし
ソースコード:solid(直線の枠)
bbb2 {
border:5px solid #7777aa;
}
border:5px solid #7777aa;
}
表示例:solid
直線の枠
ソースコード:double(二重線の枠)
bbb3 {
border:3px double #7777aa;
}
border:3px double #7777aa;
}
表示例:double
二重線の枠
ソースコード:dotted(点線の枠)
bbb4 {
border:1px dotted #7777aa;
}
border:1px dotted #7777aa;
}
表示例:dotted
点線の枠
ソースコード:groove(溝線の枠)
bbb5 {
border:8px groove #7777aa;
}
border:8px groove #7777aa;
}
表示例:groove
溝線の枠
ソースコード:ridge(稜線の枠)
bbb6 {
border:8px ridge #7777aa;
}
border:8px ridge #7777aa;
}
表示例:ridge
稜線の枠
ソースコード:inset(セルが沈み込んだように見える枠)
bbb7 {
border:5px inset #7777aa;
}
border:5px inset #7777aa;
}
表示例:inset
セルが沈み込んだように見える枠
ソースコード:outset(セルが浮き上がったように見える枠)
bbb8 {
border:5px outset #7777aa;
}
border:5px outset #7777aa;
}
表示例:outset
セルが浮き上がったように見える枠
C:枠線の色
#RRGGBBの形式でカラーを指定します。
初期値は「ボックス要素の背景色」です。
ソースコード:左側に二重線
ccc1 {
border-left:10px double #000080;
}
border-left:10px double #000080;
}
表示例:左側に二重線
左側に二重線
ソースコード:上下に点線
ccc2 {
border-top:1px dotted #000080;
border-bottom:1px dotted #000080;
}
border-top:1px dotted #000080;
border-bottom:1px dotted #000080;
}
表示例:上下に点線
上下に点線
以上。
2008-07-07 00:00
nice!(1)
コメント(0)
コメント 0