css2.1 を使用して複数の背景と複数の境界線の効果を実現します
CSS2.1 を使用して、1 つの HTML 要素上で 3 つの背景画像と 2 つのコンテンツ画像の効果、または複数の境界線の効果を実現します。この漸進的な拡張方法は、CSS2.1 擬似要素とその位置属性をサポートするすべてのブラウザに適用されます。 CSS3 サポートは必要ありません。
サポートされているブラウザ: Firefox 3.5 以降、Safari 4 以降、chrome4 以降、opera10 以降、IE8 以降
これはどのようにして達成されるのでしょうか?
基本的に、作成する疑似オブジェクト (:before および :after) は、ネストされた HTML 要素の処理方法と同じです。ただし、ネストされた HTML 要素に比べて、セマンティックではないという独特の利点があります。
複数の背景または複数の境界線を使用する場合、絶対配置を使用して、HTML 要素のコンテンツの背後にある疑似要素レイヤーのコンテンツを固定する必要があります。
現実ではないコンテンツは、位置決めのための疑似要素に含まれます。これは、「親」要素の内容に影響を与えることなく、その範囲内で自由に伸縮できることを意味します。これは、絶対位置の上、右、下、左、幅、高さの値を任意に組み合わせることができ、その組み合わせのパフォーマンスが柔軟であることが主な鍵です。
どのような効果が得られるのでしょうか？
1 つの HTML 要素と関連画像に依存するだけで、複数の背景色、複数の背景画像、背景画像のクリッピング、画像の反転、画像の境界線を使用した拡張可能なボックス モデル、フローティングの偽の列などを作成できます (Xiaozhi の注: 3 列等高効果（後述）、ボックスモデルの外側の写真、外側に表示されるマルチボーダーなどの人気のある効果です。生成されたコンテンツに 2 つの追加のコンテンツ画像が必要になる場合があります。
CSS2.1 を使用した複数の背景と CSS2.1 を使用した複数の境界線のデモ ページでは、CSS2.1 擬似オブジェクト テクノロジを使用してこれらの一般的な効果を実現する方法を示します。
ほとんどの構造には子要素が含まれています。したがって、多くの場合、親要素の最初の子要素 (最後の子要素として設定される) である擬似要素を通じて、より多くの効果を表示できます。さらに、:hover を使用して、スタイルに複雑なインタラクティブ効果を生成することもできます。