CSS はスプライト テクノロジーを使用して角の丸みを実現_エクスペリエンス交換

まず、スプライトとは何かについて簡単に説明しますと、スプライトとは Web 画像アプリケーションの処理方法です。ページ内に散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、読み込まれた画像が以前のように 1 つずつ表示されることがなくなります。現在一般的なネットワーク速度では、200KB を超えない 1 つの画像の読み込み時間は基本的に同じであるため、この問題を心配する必要はありません。

ステップ 1: スプライトを作成する

PS などのツールを使用して、図に示すように画像を合成します (1 ピクセルの赤い線で区別されます)

ステップ 2: HTML コードを作成する

まず、コンテナ div に .roundedBox クラスを与えます。

コードをコピー コードは次のとおりです。

ここで、さらに 4 つの div を追加する必要があります。これは、後で丸い角を作成するときに使用します。次に、クラス .corner をそれぞれにロードする必要があり、グリッドの位置を指定するためにクラスを識別する必要があります。

コードをコピー コードは次のとおりです。

roundedBox タイプ 1 の私のコンテンツ

ステップ 3: CSS スタイルを作成する

絶対的に配置された要素は通常、相対的に配置された親要素に従って配置されます。親要素を定義できない場合は、body タグまでの、最後に相対的に配置された親要素に移動します。

最初にすべてのフィレットを定義しましょう

すべてのフィレットは絶対に配置され、高さと幅が指定されている必要があります。フィレット定義の幅と高さは両方とも 17 ピクセルです。

コードをコピー コードは次のとおりです。

.corner{位置:絶対;幅:17px;高さ:17px;}

次に、div コンテナ スタイルの定義を開始します。

コードをコピー コードは次のとおりです。

.roundedBox {位置:相対;}

クラス .roundedBox で定義された要素内で、絶対に配置された要素は、body タグではなく、この要素を基準にして配置されます。パディング値も設定する必要がありますが、設定されていない場合は、丸い角がテキストを覆い、これは明らかに私たちが望んでいる効果ではありません。重要: 上部と下部のパディング値はフィレットの高さと同じである必要があります。左右のパディング値はフィレットの幅と等価である必要があります。すでにご存知のとおり、フィレットの幅と高さは等しいため、4 隅のパディング値も等しいです。

コードをコピー コードは次のとおりです。

.roundedBox {位置:相対; パディング:17px; マージン:10px 0;}

角が丸くないように別の定義を作成しましょう

各丸い角の絶対位置を設定し、(スプライトに従って) 背景画像を配置します。

コードをコピー コードは次のとおりです。

.roundedBox {位置:相対; パディング:17px; マージン:10px 0;}
.corner {位置:絶対; 幅:17px; 高さ:17px;}
.topLeft {トップ:0; 左:0; 背景位置:-1px -1px;}
.topRight {トップ:0; 右:0; 背景位置:-19px -1px;}
.bottomLeft {ボトム:0; 左:0; 背景位置:-1px -19px;}
.bottomRight {bottom:0; right:0; 背景位置:-19px -19px;}

最後に、背景色を #type1 に合わせて、スプライトの丸い角に溶け込むようにします。

コードをコピー コードは次のとおりです。

#type1 {背景色:#CCDEDE;}
#type1 .corner {背景画像:url(../image/corners.gif);}

すべてのコード:

コードをコピー コードは次のとおりです。

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

roundedBox タイプ 1 の私のコンテンツ