# Border Radius
border ユーティリティを使用すると、任意の要素の border-radius を素早くスタイル付けできます。
# 使い方
# 注意事項
The infixes sm, lg, xl, and xxl correlate to the border radius size and are not affected by breakpoints.
# SASS変数
border radiusヘルパークラスを設定または無効にします。 vue-cli-plugin-vuetify ライブラリと variables.s(c|a)ss ファイルの使用が必要です。 変数を設定する方法に関する追加情報は、 SASS変数 のドキュメント ページにあります。
丸めサイズは、$border-radius-root変数のデフォルト値0.25remに基づいています。
$rounded: (
0: 0,
'sm': $border-radius-root / 2,
null: $border-radius-root,
'lg': $border-radius-root * 2,
'xl': $border-radius-root * 4,
'xxl': $border-radius-root * 6,
'pill': 9999px,
'circle': 50%
);
# 値の上書き
プロジェクトの 変数 ファイルに $rounded という名前のリストを追加することで、 border-radius サイズを変更または追加できます。
$rounded: (
'sm': $border-radius-root / 3,
'lg': $border-radius-root * 2
);
# サンプル
# その他
# Pill と Circle
.rounded-pill クラスでピルを作成し、 .rounded-circle クラスで円を作成できます。
# Border Radiusを取り除く
.round-0ヘルパークラスを使用して、要素のradius(半径)のすべてを削除したり、側面や角を選択したりすることができます; 例えば、.round-l-0や.round-tr-0など。
# すべてのコーナーを丸める
rounded ヘルパークラスでは、要素の border radius を変更できます。 Use the .rounded-sm, .rounded, .rounded-lg, .rounded-xl and .rounded-xxl to add a border radius of varying size.
# 上下左右それぞれの辺での丸め
Border radiusは、t, r, b, lのinfixクラスを使用して、辺ごとに設定可能です。例：.rounded-b-xl and .rounded-t
# 各コーナー単位での丸め
Border radiusは、tl, tr, br, blのinfixクラスを使用して、コーナーごとに設定可能です。