border-radius は、ほとんどの人が学習する最初のCSSプロパティの1 つであり、完全に理解している最後の1 つです カードの4 つの角をすべて12 ピクセルで丸めるのは簡単です その後、ボタンは任意の幅で丸薬である必要があり、アバターは円である必要があり、チャットバブルは1 つの鋭い角を必要とし、突然速記順序、間の違いです 50% あんど 999px、および半径は " 成長を停止します " すべて重要です。
このガイドでは、仕様からプロパティがどのように機能するか、各値がカウントされる意味、パーセンテージがピクセルとどのように異なるか、ブラウザが大きすぎる半径をどのようにスケーリングするか、一般的な形状を構築する方法、丸い角が時々表示されない例を照合します CSS 境界半径ジェネレーター、各コーナーをライブでプレビューし、最短の有効速記を出力する。 の一つである CSS ツール toolz に.
tl;dr:
border-radius要素& #39; s コーナーを丸めます。 1 つの値が 4 つのコーナーすべてを設定し、2 つの値が左上/右下と右上/左下のペアを設定し、3 つの値が左上、次に右上と左下を一緒に設定し、次に右下を設定し、4 つの値が左上から時計回りに実行されます。ピクセル半径は固定曲線です。パーセンテージは幅と高さに対して個別に測定されます50%正方形上でのみ円を作ります 辺に沿った半径が辺よりも大きくなると ブラウザは半径ごとに比例して縮小します 境界半径ジェネレータ クライアント側で速記を処理し、無料でサインアップしません。
CSS border-radius プロパティは何をしますか?
ザ・ border-radius プロパティは要素の外側の角を丸めます' s ボーダーボックス。各角は水平半径と垂直半径を持つ楕円の 4 分の 1 になります。両方の半径が等しい場合、角は 4 分の 1 円になります。
W3Cで定義されています CSS の背景と境界モジュール レベル 3、およびは 10 年以上にわたってすべての主要なブラウザで接頭辞なしがサポートされているため、ベンダー プレフィックスは必要ありません。
丸めは境界線よりも影響します。 element& #39; sの背景は丸みを帯びた形にクリップされます、 box-shadow 曲線に沿って進みますが、最新のブラウザでも同様です outline。 を追加しない限り、要素内のコンテンツはクリップされません overflow: hidden、これは最も一般的な理由丸みを帯びた角が失敗するように見えることです。
境界半径の速記はどのように機能しますか?
border-radius は、4 つのロングハンドプロパティの略語です: border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius あんど border-bottom-left-radius.与えた値の個数によって、それぞれの値がどの角に適用されるかが決まる。
| 価値観 | 例 | 左上 | 右上 | 右下 | 左下 |
|---|---|---|---|---|---|
| 1です | border-radius: 16px; |
16px の | 16px の | 16px の | 16px の |
| 2です | border-radius: 24px 8px; |
24px の | 8px の | 24px の | 8px の |
| 3つです | border-radius: 24px 8px 0px; |
24px の | 8px の | 0px の | 8px の |
| 4です | border-radius: 20px 10px 5px 0px; |
20px の | 10px の | 5px の | 0px の |
パターンは、が使用する時計回りの順序と同じです margin あんど padding、上側ではなく左上隅から始まる。 missing values are filled from their diagonal partner: with two values, bottom-right copies top-left and bottom-left copies top-right. 3 つの値で、左下のコピーを右上へ。
ジェネレーターはこのプロセスを逆行させます 各コーナーを独自のスライダーで設定し、同じ形状を生成する最小の値を書き込みます:
- 四隅がすべて等しいと、1 つの値が得られます。
- 左上が右下に、右上が左下に等しいと、2 つの値が得られます。
- 右上と左下 (ただし、もう一方の対角線は異なります) は 3 つの値を与えます。
- それ以外のものは 4 つを与えます.
1 つの結果が人々を驚かせます。左上隅だけを 20px だけ丸めて、出力は次のようになります border-radius: 20px 0px 0px;、4 値ではない 20px 0px 0px 0px. どちらも正しい; 3 値形式は右上と左下の両方がゼロであるため短くなります。すべての値は単位を保持するため、ゼロのコーナーは次のように出力されます 0px。
境界半径の px と % の違いは何ですか?
ピクセル半径は絶対サイズです。半径のパーセンテージは要素と #39; のサイズを基準としており、水平部分と垂直部分は個別に測定されます。横半径は幅に対して、縦半径は高さに対してです。
正方形では、それらは同じ数です。長方形では、そうではありません。それが理由です 50% 正方形は円に変わりますが、長方形は楕円に変わります。
224px幅と160px高さであるジェネレータ& #39; sプレビューボックスを取ります:
| 値 | 水平半径 | 垂直半径 | 形状 |
|---|---|---|---|
16px |
16px の | 16px の | 丸い長方形、円形の角 |
50% |
112px (224 の 50%) | 80px (160 の 50%) | 楕円 |
25% |
56px の | 40px の | 丸みを帯びた長方形、楕円形の角 |
999px |
999px、80pxにスケーリング | 999px、80pxにスケーリング | 丸い端を持つ丸薬 |
他の 2 つのユニットは、一度解決されるとピクセルのように動作します。 em は要素& #39; s 自身のフォントサイズと rem ルートのフォント サイズに、そう 1rem は、デフォルトのブラウザ設定で16pxです。 using em や rem コーナーをテキスト サイズで拡大できます。これは、ラベルとともに成長するボタンやタグに適しています。
ジェネレータでは、スライダーは px については 0 ～ 200、% については 0 ～ 50、em と rem については 0 ～ 10 まで、整数のステップで実行されます。ユニットを切り替えることで数値が維持され、ユニットが交換されるため、16px は変換値ではなく 16% になります。
なぜ大きな境界半径が丸くなるのをやめるのでしょうか?
仕様ではコーナーカーブが重なることを許可していないため。片側の半径の合計がその辺と #39; の長さを超えると、ブラウザは要素上のすべての半径を同じ係数だけ縮小し、それらが適合するまで続けます。
ザ・ コーナーオーバーラップルール このように機能します。 4 つの辺のそれぞれについて、辺と #39; の長さを、それに触れる 2 つの半径の合計で割ります。これらの比率のうち最小のものを取り、それを f と呼びます。 f が 1 未満の場合、すべての半径に f を掛けます。
の計算はこちらです border-radius: 999px 224 by 160 プレビューボックスで:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
各コーナーは半径80pxで終わり、高さは160pxのちょうど半分になるので、短い端は完全な半円になります。 200pxでも同じことが起こり、ピクセルスライダーの上部:fは160 / 400 = 0.4、200×0.4は再び80pxになります。短い辺の半分を過ぎると、ピクセル半径は何かを変更しなくなります。
2 つの実用的な結果が続きます。 pill ボタンは任意の非常に大きなピクセル値を使用でき、任意の幅で pill を維持します。また、スケーリングは 4 つのコーナーすべてに比例するため、1 つの特大コーナーでも他のコーナーが縮小されます。左上に 999px を設定し、残りは 20px に残し、20px のコーナーはこれに合わせてスケールダウンします。
境界半径で一般的な形状を作成するにはどうすればよいですか?
インターフェースのほとんどの丸みを帯びた形状は、一握りのレシピから来ています。ジェネレータには一般的なもののプリセットがあります。
| 形状 | CSS | 注意事項 |
|---|---|---|
| シャープ | border-radius: 0px; |
ほとんどの要素のデフォルト |
| 微妙 | border-radius: 6px; |
入力、小さなボタン |
| カード | border-radius: 12px; |
パネルとカード |
| 丸みを帯びました | border-radius: 16px; |
ジェネレーター'開始値 |
| ピル | border-radius: 999px; |
オーバーラップスケーリングを介して任意の幅で動作します |
| 円 | border-radius: 50%; |
幅と高さが等しい必要があります |
| 葉 | border-radius: 0px 24px; |
反対側の 2 つの角が丸みを帯びています |
| ブロブ | border-radius: 60% 40%; |
不均等な割合からの有機的な形 |
| スピーチバブル | border-radius: 16px 16px 16px 0px; |
スピーカーの近くの鋭い角の1 つ |
| タブ | border-radius: 8px 8px 0px 0px; |
丸みを帯びた上部、平らな底 |
円. セット 50% 幅と高さが等しい要素上。 avatars の場合、 を追加します aspect-ratio: 1 あんど object-fit: cover 画像上では、正方形以外の写真は楕円形に伸びません。
ピル. ではなく、大きなピクセル値を使用します 50%。 広いボタンで、 50% 水平半径は幅の半分であるため、端が尖った楕円形になります。 999px 代わりに高さの半分にスケールされ、丸い端が得られます。
ブロブ. の プリセット 60% 40% 左上と右下を60% に設定し、他の2 つを40% に設定します プレビューボックスでは、上端に沿った水平半径は134.4pxと89.6pxで、合計するとちょうど224pxになるため、スケーリングは発生せず、2 つの曲線はそれらの間に残りの直線エッジがない状態で満たされます プリセットはスライダーの範囲を超えることができます: Blobは60% を使用し、Pillは999pxを使用し、出力はスライダーを移動するまでそれらの値を維持します。
吹き出しとタブ. どちらの図形も一致する対角線ペアを持たないため、どちらも 4 つの値すべてが必要です。ジェネレーターで角を個別に設定すると、より短い形式が存在しないことが確認されます。
Border-radius のスラッシュ構文は何ですか?
スラッシュは水平半径と垂直半径を分離するため、各コーナーは直接選択したサイズの非円形の楕円にすることができます。
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
スラッシュの各辺の値は、通常の速記と同じ1 から4 の規則に従います。 Toolzジェネレータはスラッシュ構文を書きません: それは円、丸薬、カードと塊をカバーする角ごとに1 つの半径を設定します。 egg図形とカスタムレンズフォームの場合は、ジェネレーター& #39; s出力から開始し、手でスラッシュ部分を追加します。
丸い角が表示されないのはなぜですか?
とき border-radius 何もしなかったようで、原因はほとんどの場合、これらのいずれかです。
| 症状 | 原因 | 修正 |
|---|---|---|
| 画像や子供が角から突き出ます | デフォルトでは子供はクリップされません | 追加 overflow: hidden 丸みを帯びた親に、または子供にも丸みを帯びています |
| 目に見える変化は一切ありません | 要素には背景、境界線、影がありません | 形状が見えるように背景色または境界線を与えます |
| テーブルの角は正方形にとどまります | border-collapse: collapse テーブルの上に |
使い border-collapse: separate と border-spacing: 0、またはラッパーを丸める |
| 円は楕円形のように見えます | 幅と高さが異なります | 等次元を設定するか、 aspect-ratio: 1 |
| ピルは端が尖っています | 使用 50% 広い要素について |
のような大きな px 値を使用します 999px |
| 半径は増加を停止します | オーバーラップスケーリング | 予想;半径は短い辺の半分に上限が付けられます |
| 内側の要素の角は厚く見えます | 内半径はパディング内の外半径に等しい | 内半径を外半径からパディングを引いた値に設定します |
最後は微妙です。 を付けたカード border-radius: 16px あんど padding: 8px 半径16pxの同じ画像を含むと 不均一に見えます なぜなら内側の曲線はもっときつくなければならないからです 外側の曲線に続く内側の半径は 16 マイナス8 なので 8pxです。
境界半径は影や勾配とどのように組み合わされますか?
丸みを帯びた角が単独で出荷されることはほとんどありません。カードには通常、影があり、多くの場合グラデーションの背景があり、両方とも丸みを帯びた形状に自動的に従います。
box-shadow 丸みを帯びたボーダーボックスをトレースするため、12pxカードの下の柔らかい影は、余分な作業なしで12pxの丸みを帯びた角を持っています。 the ボックスシャドウジェネレータ 丸みを帯びた要素に影をプレビューします ボックスシャドウガイド その背後にあるオフセット、ぼかし、スプレッドの値について説明します。
グラデーションを含む背景も丸みを帯びた形状にクリップされます。塗りつぶしをデザインするには、を使用します CSS グラデーション ジェネレーター; ザ CSS グラデーション ガイド 構文をたどります。コーナーのサイズが固定されたままではなくビューポートで拡大縮小する必要がある場合は、 CSS クランプジェネレータ を構築します clamp() 半径として使用できる値。たとえば、電話機では 8 px、ワイド スクリーンでは 20 px のカードです。
発電機を使用して、段階的に
- プリセットを選ぶ カード、ピル、サークル、ブロブなど、デフォルトの 16 ペンス コーナーから開始します。
- コーナーを調整します. コーナートグルはデフォルトで独立しており、各スライダーは独自のコーナーのみを移動します。 「リンク」に切り替えて、4 つすべてを一緒に移動します。
- 単位を選択します: px、%、em または rem.
- プレビューを確認します. グラデーション ボックスは、大きな値でのオーバーラップ スケーリングを含め、ドラッグすると更新されます。
- CSS をコピーします。 Copy CSS ボタンは、全部をコピーします
border-radius:最短形式の宣言.
すべてがクライアント側で実行されます: プレビューとコードはブラウザのJavaScriptによって生成され、何もアップロードされず、ページが一度読み込まれるとオフラインで動作し続けます 準備が整ったら、 border-radius generatorを開きます、あなたのコーナーを設定し、宣言をまっすぐにあなたのスタイルシートに貼り付けます。
