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プロパティには 3 つの値があります。
ボーダースタイル: 点線の実線二重;
- 上の境界線は点線です
- 左右の境界線がしっかりしている
- 下の枠線が二重になっている
もしborder-styleプロパティには 2 つの値があります。
境界線のスタイル: 点線の実線。
- 上下の境界線が点線で表示される
- 左右の境界線がしっかりしている
もしborder-styleプロパティには 1 つの値があります。
境界線のスタイル: 点線;
- 4 つの境界線がすべて点線になっている
例
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
のborder-styleプロパティは上記の例で使用されています。ただし、次の場合にも機能しますborder-widthとborder-color。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。