So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

【ボックス】border [リファレンス]

説 明

ボックス要素の枠線を指定します。

使い方

▼ 一括設定
border: ;

▼ 個別設定
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

:枠線の太さ
:枠線のスタイル
:枠線の色


解 説

:枠線の太さ
数値+単位 で指定します。単位は主に「px」を用います。
初期値は「medium(普通)」で、ブラウザによって太さが異なります。

:枠線のスタイル
次のキーワードが設定可能です。但し、ブラウザによって見え方が異なります。
初期値は「none(枠線なし)」です。

none(初期値)、solid、double、dotted、groove、ridge、inset、outset

ソースコード:none(枠線なし)
bbb1 {
border:none;
}

表示例:none
枠なし


ソースコード:solid(直線の枠)
bbb2 {
border:5px solid #7777aa;
}

表示例:solid
直線の枠


ソースコード:double(二重線の枠)
bbb3 {
border:3px double #7777aa;
}

表示例:double
二重線の枠


ソースコード:dotted(点線の枠)
bbb4 {
border:1px dotted #7777aa;
}

表示例:dotted
点線の枠


ソースコード:groove(溝線の枠)
bbb5 {
border:8px groove #7777aa;
}

表示例:groove
溝線の枠


ソースコード:ridge(稜線の枠)
bbb6 {
border:8px ridge #7777aa;
}

表示例:ridge
稜線の枠


ソースコード:inset(セルが沈み込んだように見える枠)
bbb7 {
border:5px inset #7777aa;
}

表示例:inset
セルが沈み込んだように見える枠


ソースコード:outset(セルが浮き上がったように見える枠)
bbb8 {
border:5px outset #7777aa;
}

表示例:outset
セルが浮き上がったように見える枠


:枠線の色
#RRGGBBの形式でカラーを指定します。
初期値は「ボックス要素の背景色」です。

ソースコード:左側に二重線
ccc1 {
border-left:10px double #000080;
}

表示例:左側に二重線
左側に二重線


ソースコード:上下に点線
ccc2 {
border-top:1px dotted #000080;
border-bottom:1px dotted #000080;
}

表示例:上下に点線
上下に点線

以上。


nice!(1)  コメント(0) 
共通テーマ:ペット

nice! 1

コメント 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。