Oct. 25th,2020
プロパティについて
＃
概要
| 初期値 |
“border-top-style: none;” “border-right-style: none;” “border-bottom-style: none;” “border-left-style: none;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 一括指定が対象とする各プロパティの定義に依る |
| アニメーション | 一括指定が対象とする各プロパティの定義に依る |
“border-style”プロパティは要素の境界線の見た目を指定する以下のプロパティの一括指定プロパティです。
- “border-top-style”プロパティ
- “border-right-style”プロパティ
- “border-bottom-style”プロパティ
- “border-left-style”プロパティ
サンプルコード
div { border-style: dotted;}
＃
値
| 値 | 説明 |
|---|---|
| “<line-style>”値 | |
| none | 境界線を表示せず、境界線の太さや色の指定は無視されます (“border-collapse: collapse;”の場合に重なる境界線があればその境界線が表示されます。) |
| hidden | 境界線を表示せず、境界線の太さや色の指定は無視されます (“border-collapse: collapse;”の場合に重なる境界線も表示されません。) |
| dotted | 点線 |
| dashed | 破線 |
| solid | 実線 |
| double | 二重線 |
| groove | 溝のように見える線 |
| ridge | 出っ張りのように見える線 |
| inset | 境界線の中身が沈み込んでいるように見える線 (“border-collapse: collapse;”の場合は“ridge”とみなされます。) |
| outset | 境界線の中身が出っ張っているように見える線 (“border-collapse: collapse;”の場合は“groove”とみなされます。) |
| 他の値 | |
| 共通キーワード | |
＃
値の指定方法
値が1つの場合は4つすべての辺の境界線の見た目となります。
div { border-style: 〚境界線の見た目〛;}
また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する辺が変わります。
- 2つの場合は1つ目の値が上下、2つ目の値が左右の辺に適用されます。
- 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の辺に適用されます。
- 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の辺に適用されます。
border-style: 〚すべての辺〛;
border-style: 〚上下〛 〚左右〛;
border-style: 〚上〛 〚左右〛 〚下〛;
border-style: 〚上〛 〚右〛 〚下〛 〚左〛;
＃
使用例
＃
境界線の見た目を指定する
div { border-style: none;}
border-style: none;
div { border-style: hidden;}
div {
border-width: 5px;
border-style: dotted;
}
border-style: dotted;
div {
border-width: 5px;
border-style: dashed;
}
border-style: dashed;
div {
border-width: 5px;
border-style: solid;
}
border-style: solid;
div {
border-width: 5px;
border-style: double;
}
border-style: double;
div {
border-width: 5px;
border-style: groove;
}
border-style: groove;
div {
border-width: 5px;
border-style: ridge;
}
border-style: ridge;
div {
border-width: 5px;
border-style: inset;
}
border-style: inset;
div {
border-width: 5px;
border-style: outset;
}
border-style: outset;
＃
それぞれの辺の境界線の見た目を指定する
div {
border-width: 5px;
border-style: dotted double dashed groove;
}
border-style: dotted double dashed groove;
div {
border-width: 5px;
border-style: dotted double dashed;
}
border-style: dotted double dashed;
div {
border-width: 5px;
border-style: dotted double;
}
border-style: dotted double;
