CSS obrubi i obrisi dragocjeni su alati za web dizajnere koji žele dodati štih web stranici. Jednostavni su za korištenje nakon što znate kako rade i dovoljno su svestrani da zadovolje širok raspon potreba. Pogledajmo CSS obrube da vidimo gdje biste trebali početi.
Koja je razlika između obruba i obrisa u CSS-u?
CSS obrisi i granice tvore dva vanjska sloja CSS box model, sjedi između granica i margina. Iako su ova svojstva slična, imaju različite vrijednosti i svrhe.
Kao prvo, obrisi CSS-a nalaze se izvan granica. To znači da se mogu preklapati sa sadržajem izvan elementa na koji ih primjenjujete. Uz to, CSS granice mijenjaju dimenzije elementa, ali obrisi ne.
Ako imate poteškoća s vizualizacijom stilova obruba i obrisa, možete koristiti svoj razvojne alate preglednika za otklanjanje pogrešaka ih.
CSS Border & Outline Vrijednosti zajedničkih svojstava
Unatoč razlikama, CSS obrubi i obrisi dijele neke od svojih vrijednosti. Stenografija koju koristite za svaki je također vrlo slična.
CSS obrub i obris stenografski
Kao i druga složena CSS svojstva, i obrubi i obrisi imaju dostupnu stenografiju. Oba ova svojstva dijele isti format za svoje mogućnosti stenografije i izgleda ovako.
granica: širinastilboja;
obris: širinastilboja;Ovo stvara pravila koja izgledaju ovako kada su u akciji. Naravno, ova skraćenica ne pokriva sve vrijednosti dostupne za ova svojstva.
rub: 10px jednobojno plavo;
obris: 20px puno crveno;Ova skraćena CSS pravila obruba i obrisa rezultiraju tankim plavim obrubom s debelim crvenim obrisom.
Kao i kod drugih skraćenih CSS svojstava, također možete koristiti pojedinačna svojstva za postizanje istih rezultata.
CSS širina obruba i širina obruba
Širina obruba i obrisa izborne su vrijednosti CSS svojstva koja postavljaju debljinu obruba i obrisa koje koristite. Format za ova svojstva je isti.
outline-width: 20px;
border-width: 10px;Obrubi dopuštaju postavljanje pojedinačnih širina za svaku stranu elementa, ali obrisi ne. Više o tome možete pročitati u sljedećim odjeljcima.
CSS stil obruba i obrisa
CSS granice i obrisi dolaze u različitim stilovima. Čvrsti obrubi su najčešći, ali možete biti kreativni s načinom na koji koristite obrube i obrise.
rubni stil: čvrsta;
stil obrisa: točkasto;Potpuni popis različitih CSS obruba i stilova obrisa možete pronaći na kraju ovog članka.
CSS boja obruba i boja obrisa
Kao i kod drugih CSS svojstava koja se temelje na boji, obrubi i obrisi prihvaćaju sve legalne CSS boje. To uključuje heksadecimalne kodove, RGB kodove, stenografske boje i još mnogo toga.
boja obruba: plava;
boja obrisa: #ff0000;Također možete koristiti gradijente boja kada radite s CSS obrubima i obrisima.
Vrijednosti svojstava ruba CSS-a
Uz vrijednosti zajedničkih svojstava, granice i obrisi također imaju jedinstvene vrijednosti za istraživanje. CSS granice imaju dva jedinstvena svojstva koja vrijedi naučiti.
CSS radijus granice
Dodavanje radijusa obrubu elementa daje vam puno kontrole nad njegovim oblikom. Svaki kut elementa može imati drugačiji radijus, a ovo se svojstvo može postaviti čak i kada je border-style postavljen na ništa.
rubni radijus: 20px;Možete postaviti jednu vrijednost za promjenu polumjera svih kutova.
Također možete podijeliti kutove u grupe gornji lijevi/donji desni i gornji desni/donji lijevi.
rubni radijus: 10px 20px;To olakšava stvaranje zanimljivih oblika s vašim HTML elementima.
Konačno, možete postaviti da svaki kut ima svoj radijus.
rubni radijus: 10px 20px 30px 40px;Ove se vrijednosti primjenjuju u smjeru kazaljke na satu počevši od gornjeg lijevog kuta.
Svojstva bočne strane CSS-a
Za razliku od obrisa, možete postaviti da svaka strana obruba ima jedinstvenu vrijednost za mnoga svojstva. To omogućuje svakoj strani vašeg elementa dati različitu širinu.
border-left-width: 10px;
border-desno-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;Također možete postaviti nezavisne CSS stilove obruba za svaku stranu elementa.
border-left-style: čvrsta;
border-desno-style: točkasto;
border-top-style: crtkano;
rub-bottom-style: dvostruko;I možete promijeniti boju svake strane ako želite.
border-left-style: plavo;
rub-desni stil: #ff0000;
rub-top-style: #00ff00;
rub-bottom-style: rgb (0, 0, 255);Rubne strane CSS-a rade s uobičajenom skraćenicom za ovako kombiniranje.
rub-lijevo: 10px jednobojno plavo;
granica-desno: 20px točkasto #00ff00;
rub-top: 30px isprekidano #ff0000;
granica-dolje: 40px dvostrukorgb(0, 0, 255);Vrijednosti svojstava CSS Outline
Poput CSS obruba, obrisi imaju vlastito jedinstveno svojstvo; outline-offset.
CSS outline-offset
Dodavanje pomaka obrisu stvara razmak između njega i glavnog elementa. Ovaj pomak mora biti isti za svaku stranu obrisa, a svojstvo prihvaća samo jednu vrijednost.
outline-offset: 10px;Ovo može biti zgodan način da iskoristite treći obrub za svoje elemente koji odgovara vašoj boji pozadine.
CSS stilovi obruba i obrisa
I obrubi i obrisi trebaju stil da bi funkcionirali. Postoji deset dostupnih stilova za odabir, uključujući rubove koji se uopće ne prikazuju.
rubni stil: čvrsta;
rubni stil: točkasto;
rubni stil: isprekidan;
rubni stil: žlijeb;
rubni stil: greben;
stil obruba: dvostruko;
stil obruba: umetnuti;
rubni stil: početak;
rubni stil: skriven;
stil obruba: nijedan;Obrubi dijele iste stilove s obrisima, samo sa stilom obrisa postavljenim kao svojstvo.
Kako koristiti CSS obrube i obrise
Obrisi i granice izvrsni su alati za dizajn za kreatore web stranica. Ovim CSS svojstvima možete definirati izgled i dojam svoje web stranice, ali morat ćete biti kreativni.
