Kako dodati dvojno obrobo z različnimi barvami?

Dvojne obrobe lahko dodate z drugo barvo, da bo vsebina bolj privlačna in edinstvena od drugih delov strani. V ta namen je ' :prej ' se uporabi izbirnik in ' vsebino Lastnost se uporablja za razširitev vsebine. Ta članek prikazuje navodila po korakih za dodajanje dvojnih obrob z različnimi barvami.

Kako dodati dvojno obrobo z različnimi barvami?

Če želite dodati dvojno obrobo kateri koli obliki z uporabo CSS, uporabite » :prej ” Selektor je znan. Spremeni barvi obeh robov, da postaneta edinstveni. Spodaj navedeni postopek po korakih za dodajanje dvojne obrobe z različnimi barvami:

1. korak: dodajte element Div in dodelite razrede

V datoteki HTML dodajte element div znotraj oznake in dodelite » razred ' z imenom ' dvorobo ”. Uporabniki lahko ustvarijo tudi lastno ime razreda:

< div razred = 'dvorobo' >

< / div >

2. korak: Ustvarite oznako sloga

V tem koraku ustvarite del za razred ' dvorobo « in naredite eno kopijo z » :prej ” selektor. Na ta način bodo lastnosti CSS uporabljene za naše razrede:

< stil >

.double- meja {

}

.double- meja :prej {

}

< / stil >

3. korak: dodajte sloge v razred

Lastnosti CSS veljajo za element div, ki ima razred » dvorobo ”. Spodaj so navedeni naslednji slogi:

.double- meja {

ozadje- barva : #ccc;

meja : 4 slikovne pike polno zelena;

oblazinjenje: 50px;

premer : 16 slikovnih pik;

višina : 16 slikovnih pik;

položaj: relativni;

rob: 0 avto;

}

Opis lastnosti CSS je podan spodaj:

Najprej dodajte ' Barva ozadja «, ki je siv, in » meja ” teže 4 slikovnih pik in zelene barve.
' oblazinjenje ” velikosti 50 slikovnih pik, da ustvarite notranji prostor velikosti 50 slikovnih pik z vseh strani.
Na koncu je ' premer « in » višina” od 16px. Tudi ' marža ” je 0 auto, kar pomeni, da bosta zgornji in spodnji rob nič in levi.

Spletna stran izgleda takole:

Izhod prikaže, da je obroba uporabljena za »div«.

4. korak: Dodajanje izbirnika CSS

Zdaj se pomaknite proti drugemu polju v oznaki sloga, ki ima » :prej ” priložen izbirnik in napišite spodnjo kodo:

.double- meja :prej {

ozadje : nobena;

meja : 4 slikovne pike polno modra;

vsebino : '' ;

položaj: absolutno;

zgoraj: 4px;

levo: 4px;

desno: 4px;

spodaj: 4px;

}

Lastnosti so razložene spodaj:

Uporabi ' položaj ” lastnost, da položaj elementa postane fiksen.
Po tem je ' zgoraj, levo, desno in spodaj ” določa rob na novo ustvarjenega elementa od prvotnega.
Izbirnik CSS, imenovan »: prej ” doda vsebino pred izbrani element.

Izhod izgleda takole:

Tako lahko z različnimi barvami dodamo dvojno obrobo.

Zaključek

Če želite dodati dvojno obrobo, najprej ustvarite element div in ga dodelite razredu. Nato dodajte CSS ' položaj ” lastnost, ki mora biti nastavljena na relativno. Po tem mu dodajte izbirnik CSS »:before«, tako da lahko uporabniki dodajajo vsebino pred izbranim elementom. Ta vodnik je prikazal uporabo dvojnih obrob z različnimi barvami.

Kako dodati dvojno obrobo z različnimi barvami?