プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

CSS:ボーダー領域を定義

 

ボックス構造

f:id:midori_x:20191215222957p:plain

  

 

ボーダー領域の種類(線種)を定義

要素名{

  border-style:値;

}

none  solid  double  dashed  botted  groove  ridge  inset  outset

 f:id:midori_x:20191215224543p:plain

 

 

ボーダー領域の幅を定義

要素名{

  border-width:値;

}

f:id:midori_x:20191215225130p:plain

 

ボーダー領域の色を定義

要素名{

  border-color:値;

}

f:id:midori_x:20191215225307p:plain

 

 

 ボーダー領域を一括定義

f:id:midori_x:20191215225512p:plain

 

※個別に設定することも可能

  f:id:midori_x:20191215231814p:plain

 

 

ボーダーを角丸にする

要素名{

  :border-radius;値

}

  • 値が1つ・・・四隅に適用
  • 値が2つ・・・[左上・右下] と [左下・右上]
  • 値が3つ・・・[左上] と [左下・右上] と [右下]
  • 値が4つ・・・[左上]と[右上]と[右下]と[左下]

※水平方向と垂直方向の半径は「/」で区切る。

f:id:midori_x:20191222175800p:plain