【コーディング初心者向け】border-radiusの使い方
marginとpaddingの違い
今回は「border-radius」の使い方に関しまして、ご説明致します。
「border-radius」とは角丸設定をするためのcssです!!
「border」がついているので、線の設定の際だけに使うと思われている方が多かったので説明致します。
外側の線全体を角丸にします
全体に「border-radiu」を設定した場合。
サンプル
外枠に線を引いた場合
表示サンプル
このように全体が角丸になります。
外枠に線を引いた場合
外側の線を個別に角丸設定
上だけに「border-radiu」を設定した場合。
サンプル
外枠に線を引いた場合
表示サンプル
このように上が角丸になります。
「 border-radius:」は「左上 右上 右下 左下」の順番になります。
外枠に線を引いた場合
バックグラウンドカラーを使って角丸にします
全体に「border-radiu」を設定した場合。
サンプル
ボックスの背景カラーを入れた場合
表示サンプル
このように全体が角丸になります。
ボックスの背景カラーを入れた場合
バックグラウンドカラーを使って上側だけ角丸にします
上だけに「border-radiu」を設定した場合。
サンプル
外枠に線を引いた場合
表示サンプル
このように上が角丸になります。
「 border-radius:」は「左上 右上 右下 左下」の順番になります。
ボックスの背景カラーを入れた場合
CSSフレックスボックスのflex: 1を使いこなす方法と応用例
7月 26, 2024CSSのcalc()関数の使い方:動的で柔軟なレイアウトを実現しよう
7月 25, 2024background-color背景色をなしにするコードの書き方
7月 18, 2024