優雅なborder-radius

CSSシリーズはSCSSを使用することを前提としている.

今回のテーマはborder-radiusです.
上の買い物かごに5つの商品が入ったかわいい丸が見えますか?
上の輪を作るのは簡単そうに見えます.
しかし、何が正しく胃の輪を作るのかを考える必要がある.
以下の状況を考えてみましょう.
999999個または9999999999999999個の通知があれば、
上の円はどのように表現しますか?
また、上記の円の数を考えることも重要です.
次のBadgeを作成するときも、同じ問題を考慮します.

Badgeの内容が長くて長い場合、どうすればいいですか?
実際、これらの部分はデザイナーや企画者と相談する必要があります.
999件のようなますます多くの通知に対して、
デザインにすでに備わっているなら、デザイナーの意図通りにしたほうがいいです.
あるいは企画者が最初にBadgeのような場合、入る文は長さ制限です.
長さは決して特定の長さを超えないので、処理させない場合がよくあります.
それでも、次のような気まずい状況を避けるために、フロントエンド開発者として二重検査を行う必要があります.

元のデザインが粉々に砕かれているのを見ましたか…?
私たちは上の砕けた様子を見て、「ああ、私はすべての可能性に対して考えたことがなくて、返事もありません!」と言った.そうしてこそ悟ることができる.
実際のサイトを使ったプレイヤーが上の様子を見たら...
私たちは本当にネズミの穴に隠れたいかもしれません.
数字が溢れている場合は、
仮定設計は次のようになります.

上のデザインのように、買い物かごの商品は1~9の丸を保ち、10の桁から円の横長さが長くなり、自然に楕円形になります.
では、これらの要件を満たすために、
本当にborder-radiusを実現する方法を優雅に探ってみましょう.
まず、粉砕される可能性のある円の既存のソースコードは以下の通りです.

.badge {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: $white;
    text-align: center;
    background-color: $red;
    border-radius: 50%;
}

上記の要求に従って状態を優雅に処理するためには,まずwidth固定値を後悔する必要がある.
バッジ内の内容の長さが長くなることを知らない場合、width固定値を与えるのはクレイジーな行為です.
この場合、コンテンツ長の可変性を高めるためには、幅を固定するのではなく、適切なダウンジャケットを与えることが望ましい.
ただし、少なくとも16pxは維持しなければならないので、元のwidthを修正すると以下のようになります.min-width: 16px;そして前述のダウンジャケットも別にセットしておきましょうpadding: 0 4px;今もう一度見るとどうなりますか?

非常に困惑する様子が現れます.
どうしてこんな醜い姿になったの?
まず、上記のように周囲を丸く削って、border-radius万人しかできない機能です.
しかし、私たちは今border-radius: 50%;をあげているので、このような状況が発生しました.
では、border-radiusに正確な価格をあげればいいのではないでしょうか.
では、border-radiusに正確な価格をあげます.どういう意味ですか.
まず、いくつかのトリックを利用します.何か困ったことがあったら、実は以下のようにパーセンテージ値を書かないで、適当に大きな値を設定すればいいのです.border-radius: 100000px;
そうすると優雅な円が出てきます

しかし、border-radiusを正しく設定して問題を解決するには、第2の方法を使用することができます.
上のソースコードから見ると、heightとmin-widthには16 pxがあります.
まず、変数に設定します.$badge-size: 16px;そしてheightとwidthに入れます

height: $badge-size;
min-width: $badge-size;

次に、border-radiusを次のように設定します.border-radius: $badge-size / 2;これにより、border-radiusは実際には8pxを有する.
実際、border-radiusの価格が8px以上であれば、私たちが望んでいる優雅な円の形態が現れます.
まとめてみると、最終的にborder-radiusの値が正しく与えられたのは、(heigth와 min-width의 동일 사이즈) / 2を作り、どんな場合でも優雅な曲線を描くことができるborder-radius.
最終ソースコードは次のとおりです.

.badge {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: $badge-size;
    min-width: $badge-size;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -0.01em;
    color: $white;
    border-radius: $badge-size / 2;
    background-color: $red;
    text-align: center;
}

今では上記のような非常に楽しい状態の処理が見られます.