Obrobe in obrisi CSS so dragocena orodja za spletne oblikovalce, ki želijo mestu dodati pridih. Ko veste, kako delujejo, so enostavni za uporabo in so dovolj vsestranski, da zadovoljijo širok spekter potreb. Oglejmo si obrobe CSS, da vidimo, kje bi morali začeti.
Kakšna je razlika med obrobo in orisom v CSS?
Obrisi in obrobe CSS tvorijo dve zunanji plasti okvirni model CSS, ki sedi med mejami in robovi. Čeprav so te lastnosti podobne, imajo različne vrednosti in namene.
Prvič, obrisi CSS se nahajajo zunaj meja. To pomeni, da se lahko prekrivajo z vsebino zunaj elementa, za katerega jih uporabite. Poleg tega obrobe CSS spremenijo dimenzije elementa, obrisi pa ne.
Če imate težave z vizualizacijo slogov obrob in orisa, lahko uporabite svoj razvojna orodja brskalnika za odpravljanje napak njim.
Vrednosti lastnosti skupne rabe CSS Border & Outline
Kljub razlikam imajo obrobe in obrisi CSS nekatere enake vrednosti. Tudi kratica, ki jo uporabljate za vsakega, je zelo podobna.
Okrajšava CSS Border & Outline
Tako kot druge kompleksne lastnosti CSS imajo tudi obrobe in obrisi na voljo stenografijo. Obe lastnosti imata isti format za svoje možnosti stenografije in izgleda takole.
meja: premerstilbarva;
oris: premerstilbarva;To ustvari pravila, ki izgledajo takole, ko so v akciji. Seveda pa ta okrajšava ne zajema vseh vrednosti, ki so na voljo za te lastnosti.
obroba: 10 slikovnih pik trdno modra;
obris: 20 slikovnih pik polno rdeč;Ta skrajšana pravila obrobe in orisa CSS povzročijo tanek modri rob z debelim rdečim obrisom.
Tako kot druge skrajšane lastnosti CSS lahko tudi za doseganje enakih rezultatov uporabite posamezne lastnosti.
CSS border-width & outline-width
Širina obrob in obrisov sta neobvezni vrednosti lastnosti CSS, ki določata debelino obrob in obrisov, ki jih uporabljate. Format za te lastnosti je enak.
širina obrisa: 20px;
širina roba: 10px;Obrobe omogočajo nastavitev posameznih širin za vsako stran elementa, obrisi pa ne. Več o tem lahko preberete v naslednjih razdelkih.
Slog obrobe in oris CSS
Obrobe in obrisi CSS so na voljo v različnih slogih. Trdne obrobe so najpogostejše, vendar ste lahko kreativni pri uporabi obrob in obrisov.
slog obrobe: trdna;
slog obrisa: pikčasto;Celoten seznam različnih slogov obrob in orisov CSS najdete na koncu tega članka.
Barva obrobe in barva obrisa CSS
Tako kot druge lastnosti CSS, ki temeljijo na barvah, tudi obrobe in obrisi sprejemajo vse zakonske barve CSS. To vključuje šestnajstiške kode, RGB kode, stenografske barve in drugo.
barva obrobe: modra;
oris-barva: #ff0000;Pri delu z obrobami in obrisi CSS lahko uporabite tudi barvne prelive.
Vrednosti lastnosti obrobe CSS
Obrobe in obrisi imajo poleg skupnih vrednosti lastnosti tudi edinstvene vrednosti, ki jih je treba raziskati. Obrobe CSS imajo dve edinstveni lastnosti, ki se ju je vredno naučiti.
CSS border-radius
Dodajanje polmera obrobi elementa vam daje velik nadzor nad njegovo obliko. Vsak vogal elementa ima lahko drugačen polmer in to lastnost je mogoče nastaviti, tudi če je border-style nastavljen na none.
polmer obrobe: 20px;Za spremembo polmera vseh vogalov lahko nastavite eno samo vrednost.
Prav tako lahko razdelite vogale v skupine zgoraj levo/spodaj desno in zgoraj desno/spodaj levo.
polmer obrobe: 10px 20px;To olajša ustvarjanje zanimivih oblik z elementi HTML.
Končno lahko nastavite, da ima vsak vogal svoj polmer.
polmer obrobe: 10px 20px 30px 40px;Te vrednosti veljajo v smeri urinega kazalca od zgornjega levega kota.
Lastnosti obrobe CSS
Za razliko od obrisov lahko nastavite, da ima vsaka stran obrobe edinstveno vrednost za številne njene lastnosti. To omogoča, da vsaki strani elementa daste drugačno širino.
border-left-width: 10px;
robna-desna širina: 20px;
širina zgornje meje: 30 slikovnih pik;
robna-spodnja širina: 40px;Nastavite lahko tudi neodvisne sloge obrob CSS za vsako stran elementa.
rob-levi slog: trdna;
border-desno-style: pikčasto;
slog zgornje meje: črtkana;
robni slog: dvojno;In lahko spremenite barvo vsake strani, če želite.
robni levi slog: modra;
rob-desni slog: #ff0000;
slog zgornje meje: #00ff00;
slog obrobe-spodnje: rgb (0, 0, 255);Obrobne strani CSS delujejo z običajno kratico za tako kombiniranje.
obroba-levo: 10 slikovnih pik polna modra;
meja-desno: 20px s pikami #00ff00;
meja na vrhu: 30px črtkano #ff0000;
obroba-spodnja: 40px dvojnorgb(0, 0, 255);Vrednosti lastnosti orisa CSS
Tako kot obrobe CSS imajo tudi obrisi edinstveno lastnost; obris-odmik.
Odmik orisa CSS
Če obrisu dodate odmik, ustvarite prostor med njim in glavnim elementom. Ta odmik mora biti enak za vsako stran obrisa, lastnost pa sprejme samo eno vrednost.
odmik obrisa: 10px;To je lahko lep način, da uporabite tretjo obrobo za svoje elemente, ki se ujema z vašo barvo ozadja.
Slogi obrob in orisov CSS
Obrobe in obrisi potrebujejo slog, da delujejo. Izbirate lahko med desetimi slogi, vključno z obrobami, ki se sploh ne prikažejo.
slog obrobe: trdna;
slog obrobe: pikčasto;
slog obrobe: črtkana;
slog obrobe: utor;
slog obrobe: greben;
slog obrobe: dvojno;
slog obrobe: vložek;
slog obrobe: začetek;
slog obrobe: skrito;
slog obrobe: brez;Obrobe imajo iste sloge kot obrisi, le da je kot lastnost nastavljen slog obrobe.
Kako uporabljati obrobe in obrise CSS
Orisi in obrobe so odlična orodja za oblikovanje za ustvarjalce spletnih mest. S temi lastnostmi CSS lahko določite videz in občutek svojega spletnega mesta, vendar boste morali biti ustvarjalni.