実装原則:
このエフェクトは実際には第 2 章で実装したバリアントです。主なキー コードについて話しましょう。
主な変更点は背景画像の位置ですが、今回は第 2 章のものとは少し異なります。今回は、以下の 2 つの丸い角の変更を考慮する必要があります。
まず、上記の 2 つの丸い角の実装を見てみましょう。
/*画像のオフセット配置 - 上部*/
.sharp b.b2{背景位置:-4px 上;}
.sharp b.b3{背景位置:-2px -1px;}
.sharp b.b4{背景位置:-1px -2px;}
以下の 2 つの QQ 絵文字の丸い角のスタイル設定を見てみましょう。下部と上部は互いに対応しています。
/*画像のオフセット配置 -- 下部*/
.sharp b.b7{背景位置:-4px 下;}
.sharp b.b6{背景位置:-2px 下;}
.sharp b.b5{背景位置:-1px 下;}
さまざまな画像呼び出しスタイル:
/*配色 1、グリーン スタイル ---------------------------------------------------*/
/*枠線の色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{ボーダーカラー:#262626;}
.color1 .b1,.color1 .b8{背景:#262626;}
/*画像パス*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no -繰り返す;}
最初の 2 つの文は一緒になって境界ボックスの色の値を形成します。これは同じ色の値に設定する必要があります。次の文は画像の呼び出しパスを設定します。
わずか 3 文で配色を取得できます。