異なる色の二重枠を追加するにはどうすればよいですか?
CSS を使用して図形に二重枠を追加するには、「 ：前 』セレクターが有名です。両方の境界線の色を変更して、それぞれをユニークにします。異なる色の二重枠を追加するための段階的な手順を以下に示します。
ステップ 1: Div 要素を追加し、クラスを割り当てる
HTML ファイルの
タグ内に div 要素を追加し、「 クラス ”という名前で 二重枠 ”。ユーザーは独自のクラス名を作成することもできます。< ディビジョン クラス = 「ダブルボーダー」 >
< / ディビジョン >
ステップ 2: スタイルタグを作成する
このステップでは、クラス「」の部分を作成します。 二重枠 」を使用して 1 部作成します。 ：前 」セレクター。このようにして、CSS プロパティがクラスに適用されます。
< スタイル >
。ダブル- 国境 {
}
。ダブル- 国境 ：前 {
}
< / スタイル >
ステップ 3: クラスにスタイルを追加する
CSS プロパティは、「」クラスを持つ div 要素に適用されます。 二重枠 ”。以下では、次のスタイルについて説明します。
。ダブル- 国境 {
バックグラウンド- 色 : #ccc;
国境 : 4px 緑一色。
パディング: 50ピクセル;
幅 : 16ピクセル;
身長 : 16ピクセル;
位置: 相対的;
マージン： 0 自動;
}
CSS プロパティの説明は次のとおりです。
- まず、「」を追加します。 背景色 ” は灰色で、” 国境 」 4pxのウェイトと緑色の。
- ” パディング 50pxの」を使用して、四方から50pxの内部空間を作成します。
- 結局のところ、「 幅 ' と ' 身長' 16pxの。また、「 マージン 」は 0 auto で、上下の余白がゼロで左になります。
Webページは次のようになります。
出力には、境界線が「div」に適用されていることが表示されます。
ステップ 4: CSS セレクターの追加
ここで、スタイル タグの 2 番目のボックスに移動します。 ：前 」セレクターをアタッチし、以下のコードを記述します。
。ダブル- 国境 ：前 {バックグラウンド ： なし;
国境 : 4px 青一色。
コンテンツ : 「」 ;
位置: 絶対;
上: 4px;
左: 4px;
右: 4px;
下: 4px;
}
プロパティについては以下で説明します。
- 使用 ' 位置 ” プロパティを使用して要素の位置を固定します。
- その後、「 上、左、右、下 」は、元のアイテムから新しく作成されたアイテムのマージンを定義します。
- 「:」というCSSセレクター 前 」は、選択した要素の前にコンテンツを追加します。
出力は次のようになります。
このようにして、異なる色を使用して二重枠を追加することができます。
結論
二重枠を追加するには、まず div 要素を作成し、それをクラスに割り当てます。次に、CSS「」を追加します。 位置 」プロパティは相対に設定する必要があります。次に、CSS セレクター「:before」を追加して、ユーザーが選択した要素の前にコンテンツを追加できるようにします。このガイドでは、さまざまな色の二重枠の使用方法を説明しました。