Oct. 25th,2020
プロパティについて
＃
＃
値
| 値 | 説明 |
|---|---|
| “<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”とみなされます。) |
| 他の値 | |
| 共通キーワード | |
＃
使用例
＃
下辺の境界線の見た目を指定する
div { border-bottom-style: none;}
border-bottom-style: none;
div { border-bottom-style: hidden;}
div {
border-width: 5px;
border-bottom-style: dotted;
}
border-bottom-style: dotted;
div {
border-width: 5px;
border-bottom-style: dashed;
}
border-bottom-style: dashed;
div {
border-width: 5px;
border-bottom-style: solid;
}
border-bottom-style: solid;
div {
border-width: 5px;
border-bottom-style: double;
}
border-bottom-style: double;
div {
border-width: 5px;
border-bottom-style: groove;
}
border-bottom-style: groove;
div {
border-width: 5px;
border-bottom-style: ridge;
}
border-bottom-style: ridge;
div {
border-width: 5px;
border-bottom-style: inset;
}
border-bottom-style: inset;
div {
border-width: 5px;
border-bottom-style: outset;
}
border-bottom-style: outset;
