TIL #10 CSS border, background

border枠線プロパティ

borderは、枠線を作成するプロパティです.
文法は以下の通りです.border : border-width border-style``border-color | initial | inherit border-width:線の厚さを決定します.既定値はmediumです.border-style:直線の形状を決定します.デフォルトはnoneです.border-color:線の色を指定します.initial:デフォルトに設定されています.inherit:親要素の属性値を継承します.
例

.a {
  border: 4px dashed #bcbcbc;
}
.b {
  border: thick dotted #f44336;
}
.c {
  border: 5pt groove #3f51b5;
}
      

border-radius

エレメント境界の頂点を丸くします.
円形頂点を適用するには1つの値、楕円頂点を適用するには2つの値を使用します.
数値と単位を使用して、フィレットの半径値を設定します.
使用可能な単位:px、%使用するborderのheight値とwidth値の半値を入力するか、50%を入力するだけで円を作成できます.border-radius: 50%;border-radiusアトリビュートは、各頂点を選択することで、さまざまなシェイプを作成できます.border-radius : top-left-x top-right-x bottom-right-x bottom-left-x/top-left-y top-right-y bottom-right-y bottom-left-y;
例

.message__buble {
  background-color: white;
  padding: 8px 13px;
  font-size: 18px;
  border-radius: 15px;
  border-top-left-radius: 0px;
  margin-right: 0px;
  margin-left: 5px;
}

border-radiusを用いてKakaoTalk情報の形状を生成することができる.

background

background-color:背景色を指定します.background-image:画像を背景とした属性.urlを使用して画像を入力します.background-size:背景画像の横方向および縦方向の寸法を決定することができる.auto:画像サイズを保持length:2つの値を追加し、1つ目の値は横方向のサイズ、2つ目の値は縦方向のサイズです.値を1つ追加すると横方向のサイズになり、縦方向のサイズは元の画像の横方向と縦方向のスケールに基づいて自動的に決定されます.パーセンテージも使用できます.cover:画像を拡大または縮小して、使用背景のすべての要素を塗りつぶす.垂直スケールの維持(Keep Vertical Scale)contain:画像を使用背景の最大サイズを超えないように拡大または縮小する.縦のスケールを維持initial:デフォルトに設定されています.inherit:親要素の属性値を継承します.

グラデーション

linear-gradient:線形グラデーション効果を生成します.linear-gradient( direction, color1, color2, …, color3 ) to bottom:上から下へグラデーション.既定値.to top:下から上へグラデーション.to left:右から左へグラデーション.to right:左から右へグラデーション.ndeg:n度方向にグラデーション.
例
background: linear-gradient(
90deg,
rgba(232, 135, 22, 1) 12%,
rgba(206, 208, 17, 1) 90%
);