Jak přidat dvojité ohraničení s různými barvami?
Chcete-li přidat dvojité ohraničení na jakýkoli tvar pomocí CSS, „ :před “ Selektor je slavný. Změní barvy obou okrajů, aby byly jedinečné. Níže uvedený postup krok za krokem pro přidání dvojitého okraje s různými barvami:
Krok 1: Přidejte prvek Div a přiřaďte třídy
V souboru HTML přidejte prvek div do značky
a přiřaďte „ třída “ s názvem “ dvojité ohraničení “. Uživatelé si také mohou vytvořit svůj vlastní název třídy:< div třída = 'dvojité ohraničení' >
< / div >
Krok 2: Vytvořte značku stylu
V tomto kroku vytvořte část pro třídu „ dvojité ohraničení “ a vytvořte z ní jednu kopii s „ :před ” volič. Tímto způsobem budou vlastnosti CSS aplikovány na naše třídy:
< styl >
.dvojnásobek- okraj {
}
.dvojnásobek- okraj :před {
}
< / styl >
Krok 3: Přidejte styly do třídy
Vlastnosti CSS se vztahují na prvek div, který má třídu „ dvojité ohraničení “. Níže jsou uvedeny následující styly:
.dvojnásobek- okraj {
Pozadí- barva : #ccc;
okraj : 4px sytě zelená;
odsazení: 50px;
šířka : 16px;
výška : 16px;
poloha: relativní;
okraj: 0 auto;
}
Popis vlastností CSS je uveden níže:
- Nejprve přidejte „ barva pozadí “, který je šedý a “ okraj “ o hmotnosti 4px a zelené barvě.
- ' vycpávka ” o 50px, aby se vytvořil vnitřní prostor 50px ze všech stran.
- Nakonec „ šířka ' a ' výška' 16px. Také ' okraj ” je 0 auto, což znamená, že horní a dolní okraj bude nula a vlevo.
Webová stránka vypadá takto:
Výstup zobrazí, že ohraničení je použito na „div“.
Krok 4: Přidání selektoru CSS
Nyní přejděte k druhému poli ve značce stylu, která má „ :před “připojený volič a napište níže uvedený kód:
.dvojnásobek- okraj :před {Pozadí : žádný;
okraj : 4px plná modrá;
obsah : '' ;
pozice: absolutní;
nahoře: 4px;
vlevo: 4px;
vpravo: 4px;
dole: 4px;
}
Vlastnosti jsou vysvětleny níže:
- Použijte „ pozice ” vlastnost, která zafixuje polohu prvku.
- Poté se „ nahoře, vlevo, vpravo a dole ” definuje okraj nově vytvořené položky od původní.
- Selektor CSS s názvem „: před “ přidává obsah před vybraný prvek.
Výstup vypadá takto:
Takto lze přidat dvojitý okraj pomocí různých barev.
Závěr
Chcete-li přidat dvojité ohraničení, vytvořte nejprve prvek div a přiřaďte jej ke třídě. Poté přidejte CSS „ pozice ” vlastnost, která musí být nastavena na relativní. Poté k němu přidejte selektor CSS „:before“, aby uživatelé mohli přidat obsah před vybraný prvek. Tato příručka demonstrovala použití dvojitých okrajů s různými barvami.