ブログ CSS編集 枠

CSS編集の中に、
BORDER:5PX SOLID #FF0000;
と、言うのがありますが、
これは、線の太さ、線の形、線の色を指定しています。

枠の太さだけを指定するときには、
BORDER-WIDTH:5PX; (5PXの太さ)

枠の色だけを指定するときには、
BORDER-COLOR:#FF0000; (赤色の線)

枠の形だけを指定するときには、
BORDER-STYLE:SOLID; (1本線)

枠の形には種類がありまして、
★ NONE=枠無し
★ SOLID=1本線
★ DOUBLE=2重線
★ DOTTED=丸点線
★ DASHED=四角点線
★ INSET=枠内がへこんで見える
★ OUTSET=枠内が盛り上がって見える
★ GROOVE=立体的にへこんで見える
★ RIDGE=立体的に盛り上がって見える

部分的に、太さ・形・色を変えたい場合には、
スペースで分けると指定することが出来ます。
★ 1つの時=上下左右同じ (全部)
★ 2つの時=1つ目が上下、2つ目が左右
★ 3つの時=1つ目が上、二つ目が左右、3つ目が下
★ 4つの時=1つ目から上、右、下、左と時計回り
となっています。

例えば、
BORDER-WIDTH:5PX 3PX 1PX;
これだと線の太さが、上が5PX 左右が3PX 下が1PX の太さの枠になります。

これは、色でも形でも指定できます。

位置を指定して線を引きたい場合には、
★ BORDER-TOP (上部)
★ BORDER-LEFT (左部)
★ BORDER-RIGHT (右部)
★ BORDER-BOTTOM (下部)
これでも可能です。

全部まとめてで良いのなら
BORDER:5PX SOLID #FF0000; (5PXの太さの赤い1本線)
で、OKです。
テスト


枠じゃなくて塗りつぶしたい時には、
BACKGROUND-COLOR:#00FF00; (緑色で塗りつぶす)
テスト


両方混ざると
BORDER:5PX SOLID #FF0000; 
BACKGROUND-COLOR:#00FF00; 
テスト

で、OKです。
[PR]

by canonkissd | 2008-03-12 21:04 | ブログ