はじめに: 私の記事「超洗練された角丸フレームの半完璧なソリューション」では、角丸ボックスの 7 つの異なるソリューションをまとめました。これは基本的に、インターネット上で人気のある角丸ボックスの実装ソリューションをまとめたものです。そして、私の他の記事「Pictureless Peak Corner」は別の実装方法です。
純粋な CSS で角丸を実装するのはよくないことだと私も 2 つ書いていますが、なぜこの記事が残っているのでしょうか。以前のプロジェクトでは、背景画像を使用して丸い角を実装することがよくありましたが、これらのプロジェクトがオンラインでリリースされると、以前のプロジェクトで広く使用されていたため、メンテナンス プロセス中にいくつかの新しい要件を追加する必要が生じることがありました。これらの画像はすべて CSS スプライトを使用してマージされています。余分な作業を追加したくないため、また JS を使用して http リクエストを追加したくないため、この問題を解決するにはいくつかの単純な CSS ソリューションが必要です。私の個人的な好みとしては、これらのエフェクトを処理するために画像を使用しないアプローチを使用することも好みます。私はいつも CSS でその仕事ができると感じていますが、CSS でやらせてみてはいかがでしょうか?
実装原則:
純粋な CSS を使用して角の丸いボックスを実装する原理は、インターネット上の多くの人によって詳細に説明されています。下の図は、丸い角の 1 つを拡大した後の効果です。
.png)
図1
上のレンダリングから、この丸いボックスは実際にはコンテナーで構成されていることがわかります。この幅は次のようなマージンによって実現されます。右側は5ピクセルで、上から下に5行あり、余白は5px、3px、2px、1pxの順に小さくなります。したがって、この原則に基づいて、単純な HTML 構造とスタイルを実装できます。
1. HTML 構造層:
<div class="シャープカラー1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">テキストコンテンツ</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
ｂ１～ｂ４は上側の左右２つの角丸構造を構成し、ｂ５～ｂ８は下側の左右２つの角丸構造を構成する。コンテンツはコンテンツの本体です。すべてを大きなコンテナに配置し、共通のスタイルを設定するためにシャープなクラス名を付けます。次に、color1 クラス名がその上に重ねられます。異なる色の角が丸い場合があるため、このクラス名は異なる配色を区別するために使用されます。