CSS 枠線スタイル

CSSの枠線の色 CSS 短縮表記の境界線

CSS 境界線 - 別の側面

前の章の例から、各辺に異なる境界線を指定できることがわかりました。

CSS には、各境界線 (上、右、下、左) を指定するために使用できるプロパティもあります。

例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

结果：

さまざまな境界線のスタイル

自分で試してみてください

さまざまな境界線のスタイル

上記の例の結果は次と同じです。

例

p {
  border-style: dotted 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 属性で値が設定されている場合:

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 も同様に機能します。

CSSの枠線の色 CSS 短縮表記の境界線