CSS 境界線
CSS 境界線 - 個別の側面
前のページの例から、各辺に異なる境界線を指定できることがわかりました。
CSSには、各境界線(上、右、下、左)を指定するためのプロパティもあります。
例
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
結果
さまざまな境界線のスタイル
上の例では、次と同じ結果が得られます。
その仕組みは次のとおりです。
border-styleプロパティには4つの値があります。
border-style: dotted solid double dashed;
- 上の境界線は点線です
- 右枠が塗りつぶされている
- 下の枠線が二重になっている
- 左の境界線が破線になっている
border-styleプロパティには3つの値があります。
border-style: dotted solid double;
- 上の境界線は点線です
- 左右の境界線がしっかりしている
- 下の枠線が二重になっている
border-styleプロパティには2つの値があります。
border-style: dotted solid;
- 上下の境界線が点線で表示される
- 左右の境界線がしっかりしている
border-styleプロパティには1つの値があります。
border-style: dotted;
- 4つの境界線がすべて点線になっている。
例
/* 4つの値 */
p {
border-style: dotted solid double dashed;
}
/* 3つの値 */
p {
border-style: dotted solid double;
}
/* 2つの値 */
p {
border-style: dotted solid;
}
/* 1つの値 */
p {
border-style: dotted;
}
border-styleプロパティは上記の例で使用されています。ただし、border-widthおよびborder-colorでも機能します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。