Kako dodati dvostruki obrub s različitim bojama?
Da biste dodali dvostruki obrub na bilo koji oblik pomoću CSS-a, ' :prije ” Selektor je poznat. Mijenja boje obje granice kako bi bile jedinstvene. Korak po korak dolje navedena procedura za dodavanje dvostrukog obruba s različitim bojama:
Korak 1: Dodajte Div element i dodijelite klase
U HTML datoteci dodajte element div unutar
oznake i dodijelite “ razreda ” s imenom “ dvorubni ”. Korisnici također mogu stvoriti svoje vlastito ime klase:< div razreda = 'dvorubni' >
< / div >
Korak 2: Izradite oznaku stila
U ovom koraku izradite dio za klasu ' dvorubni ' i napravite jednu kopiju s ' :prije ” selektor. Na ovaj način, CSS svojstva će se primijeniti na naše klase:
< stil >
.dvostruko- granica {
}
.dvostruko- granica :prije {
}
< / stil >
Korak 3: Dodajte stilove u razred
CSS svojstva primjenjuju se na element div koji ima klasu ' dvorubni ”. U nastavku se spominju sljedeći stilovi:
.dvostruko- granica {
pozadina- boja : #ccc;
granica : 4px jednobojno zeleno;
ispuna: 50px;
širina : 16 px;
visina : 16 px;
položaj: relativan;
margina: 0 auto;
}
Opis CSS svojstava je dat u nastavku:
- Prvo dodajte ' boja pozadine ' koja je siva i ' granica ” težine 4px i zelene boje.
- ' podstava ” od 50 px za stvaranje unutarnjeg prostora od 50 px sa svih strana.
- Na kraju, “ širina ' i ' visina' od 16 px. Također, ' margina ” je 0 automatski što znači da će gornja i donja margina biti nula i lijeva.
Web stranica izgleda ovako:
Izlaz prikazuje da je granica primijenjena na 'div'.
Korak 4: Dodavanje CSS selektora
Sada se pomaknite prema drugom okviru u oznaci stila koji ima ' :prije ” priloženi selektor i napišite sljedeći kod:
.dvostruko- granica :prije {pozadina : nijedan;
granica : 4px jednobojna plava;
sadržaj : '' ;
pozicija: apsolutna;
gore: 4px;
lijevo: 4px;
desno: 4px;
dolje: 4px;
}
Svojstva su objašnjena u nastavku:
- Koristiti ' položaj ” svojstvo da položaj elementa bude fiksan.
- Nakon toga, ' gore, lijevo, desno i dolje ” definira marginu novostvorene stavke od originalne.
- CSS selektor pod nazivom ': prije ” dodaje sadržaj ispred odabranog elementa.
Izlaz izgleda ovako:
Tako se dvostruki rub može dodati različitim bojama.
Zaključak
Da biste dodali dvostruki obrub, prvo izradite element div i dodijelite ga klasi. Zatim dodajte CSS ' položaj ” svojstvo koje mora biti postavljeno na relativno. Nakon toga dodajte CSS selektor “:before” tako da korisnici mogu dodati sadržaj prije odabranog elementa. Ovaj vodič je pokazao korištenje dvostrukih obruba s različitim bojama.