# Border Radius

border ユーティリティを使用すると、任意の要素の border-radius を素早くスタイル付けできます。

# 使い方

# 注意事項

# 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 * 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 を変更できます。 .round-sm, .rounded, .rounded-lg, .rounded-xlを使用して、さまざまなサイズのborder radiusを追加します。

# 上下左右それぞれの辺での丸め

Border radiusは、t, r, b, lのinfixクラスを使用して、辺ごとに設定可能です。例:.rounded-b-xl and .rounded-t

# 各コーナー単位での丸め

Border radiusは、tl, tr, br, blのinfixクラスを使用して、コーナーごとに設定可能です。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/17/2021, 9:17:47 AM