Ohraničenia a obrysy CSS sú cennými nástrojmi pre webových dizajnérov, ktorí chcú dodať webu šmrnc. Ľahko sa používajú, keď viete, ako fungujú, a sú dostatočne univerzálne na to, aby vyhovovali širokému spektru potrieb. Pozrime sa na okraje CSS, aby sme zistili, kde by ste mali začať.
Aký je rozdiel medzi okrajom a obrysom v CSS?
Obrysy a okraje CSS tvoria dve vonkajšie vrstvy box model CSS, sediaci medzi okrajmi a okrajmi. Aj keď sú tieto vlastnosti podobné, majú rôzne hodnoty a účely.
Po prvé, obrysy CSS sú mimo hraníc. To znamená, že sa môžu prekrývať s obsahom mimo prvku, na ktorý ich aplikujete. Spolu s tým okraje CSS menia rozmery prvku, ale obrysy nie.
Ak máte problémy s vizualizáciou štýlov ohraničenia a obrysu, môžete použiť svoj vývojové nástroje prehliadača na ladenie ich.
Hodnoty zdieľaného majetku CSS Border & Outline
Napriek rozdielom zdieľajú okraje a obrysy CSS niektoré z ich hodnôt. Skratka, ktorú používate pre každú z nich, je tiež veľmi podobná.
CSS Border & Outline Shorthand
Rovnako ako iné zložité vlastnosti CSS, aj okraje a obrysy majú k dispozícii skratku. Obe tieto vlastnosti zdieľajú rovnaký formát pre možnosti skratiek a vyzerá to takto.
hranica: šírkaštýlfarba;
obrys: šírkaštýlfarba;To vytvára pravidlá, ktoré vyzerajú takto, keď sú v akcii. Samozrejme, táto skratka nepokrýva všetky dostupné hodnoty pre tieto vlastnosti.
orámovanie: 10px plná modrá;
obrys: 20px plná červená;Výsledkom týchto skrátených pravidiel ohraničenia CSS a obrysu je tenký modrý okraj s hrubým červeným obrysom.
Podobne ako iné skrátené vlastnosti CSS môžete na dosiahnutie rovnakých výsledkov použiť aj jednotlivé vlastnosti.
CSS border-width & obrys-width
Šírky okrajov a obrysov sú voliteľné hodnoty vlastností CSS, ktoré nastavujú hrúbku okrajov a obrysov, ktoré používate. Formát týchto vlastností je rovnaký.
obrys-width: 20px;
border-width: 10px;Orámovanie umožňuje nastaviť individuálne šírky pre každú stranu prvku, ale obrysy nie. Viac o tom si môžete prečítať v nasledujúcich častiach.
CSS štýl ohraničenia a obrysu
Ohraničenia a obrysy CSS sa dodávajú v rôznych štýloch. Pevné okraje sú najbežnejšie, ale pri používaní okrajov a obrysov môžete byť kreatívni.
okrajový štýl: pevný;
štýl obrysu: bodkovaný;Úplný zoznam rôznych štýlov ohraničenia a obrysu CSS nájdete na konci tohto článku.
CSS border-color & obrys-color
Rovnako ako v prípade iných vlastností CSS založených na farbách, okraje a obrysy akceptujú všetky povolené farby CSS. Patria sem hexadecimálne kódy, kódy RGB, skratky farieb a ďalšie.
farba okraja: modrá;
farba obrysu: #ff0000;Farebné prechody môžete použiť aj pri práci s okrajmi a obrysmi CSS.
Hodnoty vlastností okrajov CSS
Okrem hodnôt zdieľaných vlastností majú hranice a obrysy aj jedinečné hodnoty, ktoré treba preskúmať. Hranice CSS majú dve jedinečné vlastnosti, ktoré sa oplatí naučiť.
CSS border-radius
Pridaním polomeru k okraju prvku získate veľkú kontrolu nad jeho tvarom. Každý roh prvku môže mať iný polomer a túto vlastnosť možno nastaviť, aj keď je štýl okraja nastavený na žiadny.
border-radius: 20px;Môžete nastaviť jednu hodnotu na zmenu polomeru všetkých rohov.
Môžete tiež rozdeliť rohy do skupín vľavo hore/vpravo dole a vpravo hore/vľavo dole.
border-radius: 10px 20px;To uľahčuje vytváranie zaujímavých tvarov pomocou prvkov HTML.
Nakoniec môžete každý roh nastaviť tak, aby mal svoj vlastný polomer.
border-radius: 10px 20px 30px 40px;Tieto hodnoty platia v smere hodinových ručičiek od ľavého horného rohu.
Vlastnosti okrajovej strany CSS
Na rozdiel od obrysov môžete každú stranu orámovania nastaviť tak, aby mala jedinečnú hodnotu pre mnohé z jej vlastností. To umožňuje dať každej strane vášho prvku inú šírku.
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;Môžete tiež nastaviť nezávislé štýly ohraničenia CSS pre každú stranu prvku.
hraničný ľavý štýl: pevný;
border-right-style: bodkovaný;
border-top-style: prerušovaná;
štýl okraja-dola: dvojitý;A ak chcete, môžete zmeniť farbu každej strany.
štýl vľavo: modrá;
štýl orámovania vpravo: #ff0000;
okrajový štýl: #00ff00;
border-bottom-style: rgb (0, 0, 255);Strany okrajov CSS fungujú s bežnou skratkou, ktorá sa takto kombinuje.
border-left: 10px plná modrá;
pravý okraj: 20px bodkované #00ff00;
okraj-top: 30px prerušovaná #ff0000;
okraj-dole: 40px dvojitýrgb(0, 0, 255);CSS Outline Property Values
Rovnako ako okraje CSS, obrysy majú jedinečnú vlastnú vlastnosť; obrys-offset.
CSS obrys-offset
Pridaním odsadenia k obrysu sa vytvorí priestor medzi ním a hlavným prvkom. Tento posun musí byť rovnaký pre každú stranu obrysu a vlastnosť akceptuje iba jednu hodnotu.
obrys-offset: 10px;Môže to byť elegantný spôsob, ako využiť tretí okraj pre prvky, ktorý zodpovedá farbe pozadia.
Štýly okrajov a obrysov CSS
Hranice aj obrysy potrebujú štýl, aby fungovali. Na výber je desať dostupných štýlov vrátane okrajov, ktoré sa vôbec nezobrazujú.
okrajový štýl: pevný;
okrajový štýl: bodkovaný;
okrajový štýl: prerušovaný;
border-style: groove;
border-style: hrebeň;
štýl okraja: dvojitý;
border-style: inset;
border-style: začiatok;
štýl ohraničenia: skrytý;
border-style: none;Ohraničenia zdieľajú rovnaké štýly s obrysmi, len s vlastnosťou nastaveným štýlom obrysu.
Ako používať okraje a obrysy CSS
Obrysy a okraje sú skvelé nástroje na návrh pre tvorcov webových stránok. Pomocou týchto vlastností CSS môžete definovať vzhľad a štýl svojho webu, ale budete musieť byť kreatívni.
