利用者:キュアラプラプ/サンドボックス/甲

表の角を丸くする方法
キュアラプラプ (トーク) 2021年3月29日 (月) 18:30 (JST)
メインページや姉妹プロジェクトで使われてるアレの作り方です
詳細情報
  1. 基本
    1. 表全体のstyle属性にこれを追加します
      • style="border-collapse:separate ; border-radius:10px"
    2. セルのstyle属性のborderにこれを追加します
      • style="border:none"
  2. 応用
    1. border-radius
      • 値を大きくすることで丸みを強くできます
        • 例:style="border-radius:50px"
      • 四つの角でそれぞれ丸みを変えられます
        • 例:style="border-radius:10px 20px 30px 40px"
        • このとき、左上→右上→右下→左下の順に描写されます。
      • 楕円形にすることもできます
        • 例:style="border-radius:10px 20px"
        • このとき、横半径→縦半径の順に描写されます。
      • また、四つの角でそれぞれ丸みを変えつつ楕円形にもできます。
        • 例:style="border-radius:10px 20px 30px 40px / 40px 30px 20px 10px"
        • このとき、左上横半径→右上横半径→右下横半径→左下横半径→左上縦半径→右上縦半径→右下縦半径→左下縦半径の順に描写されます。
コメント

# 豆知識