|
border-top-color: 色指定 |
⇔ 上の枠線の色 |
border-bottom-color: 色指定 |
⇔ 下の枠線の色 |
border-left-color: 色指定 |
⇔ 左の枠線の色 |
border-right-color: 色指定 |
⇔ 右の枠線の色 |
border-color: 色指定 |
⇔ 上・右・下・左の枠線の色 |
●値が1つの場合 ●値が2つの場合 ●値が3つの場合 ●値が4つの場合 |
値1⇒上下左右 値1⇒上下 値2⇒左右 値1⇒上 値2⇒左右 値3⇒下 値1⇒上 値2⇒右 値3⇒下 値4⇒左 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>CSS覚書</title> <style type="text/css"> <!-- body { color: #ff6600; margin: 10 } p { text-align: center; font-weight: bold; padding: 1em; border: solid 6px } #sample1 { border-color: #ff3300 } #sample2 { border-color: #ffcc00 } #sample3 { border-color: #339933 } #sample4 { border-color: #333399 } #sample5 { border-top-color: #339933; border-bottm-color: #ff3300; border-left-color: #333399; border-right-color: #ffcc00; } h1 { text-align: center } --> </style> </herd> <body> <h1>枠線の色を指定する</h1> <p id="sample1">border-color: #ff3300</p> <p id="sample2">border-color: #ffcc00</p> <p id="sample3">border-color: #339933</p> <p id="sample4">border-color: #333399</p> <p id="sample5">上: #339933 下: #ff3300 左: #339933 右: #ffcc00</p> </body> </html> |