境界半径ジェネレーター

境界半径の宣言には、最大 4 つの独立したコーナー値と、有機曲線用のオプションの 8 値のスラッシュ構文を使用できます。これは、単純な丸いカードを超えるものが必要になるまで、ほとんどの人が認識しているよりも多くの可動部分です。このジェネレーターは、これらのパーツをすべて画面上に表示します。独自のピクセルまたはパーセント単位を持つ 4 つのコーナー スライダー、対称シェイプのリンク全コーナー ショートカット、および単一の半径値では表現できないシェイプのブロブ モードです。

コーナー モードは、人々が実際に手を伸ばす形状をカバーします。すべてのコーナーを 1 つのスライダーにリンクして、完全な円、錠剤、スクワクルを作成したり、リンクを解除してドロップダウン パネルの上部またはカードの片面のみを丸くします。形状の背後にあるチェッカーボードのプレビューは、明るい背景と暗い背景を切り替えることができ、どの半径でもどのコーナーが切り取られるのかを正確に明らかにします。このサイトのビジュアル トリック ファイル ツールは、透明度を表示するために使用されているものと同じです。

Blob モードは残りの半分です。CSS の 8 値のスラッシュ構文により、各角の水平方向と垂直方向の半径が一致しなくなります。これにより、角丸長方形が有機的で不規則な輪郭に変わります。いつでも新しい形状の [ランダム化] をクリックし、その背後にある正確な CSS をコピーします。SVG エクスポートや外部ライブラリは必要ありません。プリセット ページには、ユーザーが実際に検索ボックスに入力するリクエスト (真円、スタジアムの形をしたピル ボタン、iOS スタイルのスクワクル、既成の有機的な塊) が含まれています。

このサイトのすべてのツールと同様に、このツールはブラウザ内で完全に実行されます。アップロードやアカウントは不要で、ページが読み込まれるとジェネレーターはオフラインで動作し続けます。