border-radius 値の設定に関する質問

問題記録

今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のようになります（ここでは長さ 200 ピクセル、高さ 28 ピクセルです）

見てみると、とてもシンプルです。数字の1のスタイルはさておき、全体的な親スタイルは、左に半円、右に円弧があるdivです。
これは CSS border-radius を使用して実行できます。 左側は角が丸く、半径は 50 ピクセルです。右側は角が小さく丸くなっています。以前は、div の半径はすべて 8 ピクセルでした。 border-radius の角の順序（時計回りに左上、右上、右下、左下）に従って、 border-radius: 50px 8px 8px 50px; と設定すれば問題ありません。 私はとても喜んでそのスタイルを書き、ブラウザを開きます。

私はバカだ、それは間違っている、私はこうだと思った

実際、ブラウザは次のようになります

何かおかしい。右側の角度は設定されているのに、設定されていないように見えるのはなぜでしょうか。8px を 10px に変更して再度試してみましたが、設定されていないのとほとんど変わりません。

8px にすると、顕著な曲率が得られるはずです。すべてを 8px に設定して確認してみましょう。

はい、これは 8px が持つべき曲率です。左を 50px に変更するとなぜ変わるのでしょうか? 50px と関係があるのでしょうか?疑問に思いながら、私はBaiduを見てみました。

Baiduによると、border-radius（w3c）の完全な書き方は次の通りです。

境界線の半径: 1-4 長さ|% / 1-4 長さ|%;

通常は border-radius: 50px と書きますが、実際の完全な書き方は次のようになります。

境界線の半径: 50px 50px 50px 50px / 50px 50px 50px 50px 50px;

「/」の前の 4 つの値はフィレットの水平方向の半径を表し、次の 4 つの値はフィレットの垂直方向の半径を表します。

各順序は、（水平半径：左上、右上、右下、左下）/（垂直半径：左上、右上、右下、左下）に対応します。

水平半径と垂直半径とは何ですか?

水平半径と垂直半径の比率に応じて、角度の曲率を調整できます。2 つの半径が同じ場合は、丸い角になります。 これが、私が通常角を丸く設定する理由です。なぜなら、私は完全な

例えば、border-radius:10px 20px 30px 40px/40px 30px 20px 10px

こんな感じです

前回の質問を振り返ってみましょう。

高さ 28px は無視しました。つまり、右側を半円にしたい場合は、水平方向と垂直方向の半径が両方とも 14px であれば問題ないのではないでしょうか。

境界線の半径: 14px 8px 8px 14px / 14px 8px 8px 14px; 

このように、親スタイルは正しいです。

右側に設定した8pxの丸い角は効果がないようです。左側は元々28pxの高さで、そこに50pxの半径が挿入されているため、50pxに比べて比例的に圧縮されているのかもしれません。計算すると（14 * 8 / 50 = 2.24）となり、これは設定に相当します。

境界線の半径: 14px 2.24px 2.24px 14px / 14px 2.24px 2.24px 14px;

今後スタイルを書くときは注意してください。小さな問題が大きな問題になる可能性があります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。