Top > Lecture > JouhouC2008 > 5th > border_style
AND OR

枠線のスタイルの設定

枠線のスタイルを設定するには、 border-???-styleプロパティを設定します。

border-top-style: 上の枠線のスタイル
border-bottom-style: 下の枠線のスタイル
border-left-style: 左の枠線のスタイル
border-right-style: 右の枠線のスタイル
border-style: 上下左右の枠線のスタイル

指定できるスタイルには、 次のような種類があります。

  • none(枠線を消す)
  • hidden(枠線を消す)
  • solid(直線)
  • double(二重線)
  • dashed(破線)
  • dotted(点線)
  • groove(右下から光が当たったような枠)
  • ridge(左下から光が当たったような枠)
  • inset(ボタンが押されたような線)
  • outset(ボタンが浮き出たような線)

border-styleプロパティを使えば、 上下左右の枠線のスタイルを一度に指定できます。 その場合は、値を半角スペースで区切ります。 値の個数によって、次のように枠線が設定されます。

  • 値が1つ: 「上下左右」を指定
  • 値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」
  • 値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」
  • 値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」
h1{
  border-style: dotted dotted dotted solid;
}
h2{
  border-top-style: solid;
  border-left-style: dashed;
}
h3{
  border-style: inset;
}


次へ進んでください。



Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 02:20:22 HADT (3751d)