CSSの条件付き境界半径

Facebookのコードベースから生じたAhmadによって文書化されたこのCSSトリックは、ビューポートに比べてその幅に基づいて要素のボーダーラジウスを動的に調整します。魔法はCSSの単一の行で起こります：

 .card {
  Border -Radius：Max（0px、min（8px、calc（（100VW -4PX -100％） * 9999）））;
} 

コアロジックは、 100vw （ビューポート幅）を100% （要素幅）と比較します。通常、 border-radiusは8pxです。ただし、要素の幅がビューポート幅に近づくと（約4pxの許容範囲内）、計算は負の値になります。 max(0px, ...)およびmin(8px, ...)関数は、大きな乗数（9999）と組み合わされ、0pxと8pxのボーダーラジウスの鮮明なトグルを確保し、中間値を排除します。マルチプライヤー（9999）を削除すると、要素の幅がビューポート幅に近づくと段階的な遷移が示されます。

このアプローチは、 @mediaクエリよりも利点を提供します。

• コンテナアウェア：固定ビューポート幅に依存するメディアクエリとは異なり、この手法は、コンテナクエリの形式として機能するビューポートに対する要素の幅に動的に応答します。カードのサイズを事前に知る必要はありません。メディアクエリは、その事前に定義された幅に依存します。

• 汎用性：この「Fab Four」テクニック（時々呼ばれるように）は、レイアウト応答性を正確に制御することが重要な電子メール開発やその他のコンテキストで特に役立ちます。

開発者は、メディアクエリと比較して優れた適応性を強調しているため、レスポンシブデザインシナリオの強力なツールになります。

以上がCSSの条件付き境界半径の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。