境界線の半径 50% と 100%_html/css_WEB-ITnose

最近、私は自分が書いたコードを見直していました。以前にコードを書いたとき、なぜそのように書いたかを真剣に考えたことはなく、ただ経験や既存のコードに基づいて書いていました。あるいは、そう書いている理由はなんとなく分かっているのかもしれないが、仕様書をじっくり読んだことがないので、具体的な内容は分からない。そこで、「なぜ」「なぜこれを書くのか」をできるだけ自分に問いかけることにしました。今、これを頻繁に自分に問いかけることで、たくさんの「発見」の瞬間が得られたことに気づきました。その中の 1 つを皆さんと共有したいと思います。

CSSを使って正円を描きます

Web上では、背景色や円形の画像など、円が使われている箇所をよく見かけます。

通常、円を実現するには CSS の border-radius 属性を使用します。まず正方形を描画し、次にその border-radius を 50% に設定します。しかし、なぜ50％なのでしょうか？私はこの問題について考えたことはなく、角の半径を正方形の高さまたは幅の半分に設定すると円が得られると考えていました。

これは 150 ピクセル x 150 ピクセルの正方形で、四隅の半径を 50% に設定します。 W3C border-radius の仕様定義によれば、border-radius の値がパーセンテージの場合、それはボーダー ボックスの幅と高さに対する相対パーセンテージです。この例では、ボックスの幅と高さは両方とも 150 ピクセルなので、50% は 75 ピクセルに相当します。

border-radius の仕組み

しかし時々、border-radius: 100%; を使用して、少し前のプロジェクトで、何も考えずに使用しているのを見かけます。 50%と変わらないように見えます。理由は何ですか？

Lea Verou 氏の講演「The Humble Border Radius」の中で、彼女は、W3C には一致する曲線について次の仕様があると述べました。隣接する 2 つの角の半径の合計が、対応するボックスの辺の長さを超える場合、ブラウザは再計算する必要があります。それらは一致しないでしょう。

左上隅のコーナー半径が 100% に設定されている場合、フィレットは正方形の左下隅から右上隅まで広がります。これは、コーナー半径を 150px に設定するのと同じです (つまり、正方形のサイズ）。右上隅のフィレット半径も 100% に設定すると、隣接する 2 つのフィレットの合計は 200% になります。この状況は当然許可されないため、ブラウザは再計算して、右側の丸い角のスペースを均等にし、正方形に正確に収まるまで 2 つの丸い角の半径を拡大縮小して、半径が 50 % になるようにします。

同様に、ブラウザは他の角丸にも同じ計算を適用し、計算の結果、各角丸の半径が 50% になるので、プロトタイプが表示されます。 border-radius が 150px に設定されている場合でも、ブラウザーは 75px で丸い角を描画します。これは、ブラウザーがこの正方形に対して許可する最大の丸い角半径です。

結論

すべての丸い角の半径が 100% に設定されている場合、ブラウザはグラフィックスの実際の状況に基づいていくつかの計算を実行し、丸い角がグラフィックスにぴったりフィットすることを確認します。ただし、すべてのグラフィックスの

border-radius を 100% に設定することがパフォーマンスに影響するかどうかはわかりません。

さて、先週書いた乱雑な CSS を整理してみます...

元のリンク: Border-radius 50% vs 100%

Weibo をフォロー: フロントエンド外部ジャーナル コメント