Nehnuteľnosť css – « hranica“, umožňuje nastaviť hrúbku, farbu a typ čiary po obvode okolo prvku. Parametre tejto vlastnosti je možné zapísať na jeden riadok oddelené medzerami a v ľubovoľnom poradí.

• - hrúbka čiary jeden pixel
• - plná čiara
• - Biela farba
• - čierna farba
• - šedá farba

Pevný okraj prvku

prerušovaná hranica prvku

Bodkovaný okraj prvku

Ohraničenie prvku dvojitá čiara

Majetok jednotlivých úsekov hranice

Objemovo znížený vlnitý rám

Konvexný vlnitý rám v objeme

Objemový stlačený rám

Objemový konvexný rám

Lekcie / CSS /

Lekcia 7

Takmer každá lokalita používa vlastnosť, ktorá vytvára okraj okolo prvku. Je potrebný buď pre tlačidlá alebo pre bloky s textom. Na vytvorenie okraja má prvok v CSS dve vlastnosti: okraj a obrys. Zvážme ich.

hranica

Táto vlastnosť je potrebná na nastavenie rámčeka okolo prvku, označuje jeho okraj vo webovom dokumente, šírka rámčeka sa berie do úvahy pri umiestňovaní prvku. Má 3 hodnoty - farba, hrúbka a typ rámu.

Syntax vlastnosti border je nasledovná:

okraj: Šírka Typ Farba;
Môžete si zvoliť aj iné poradie pre špecifikáciu hodnôt vlastností, ale hlavná vec je cez medzeru.

Hrúbka (šírka) rámu musí byť špecifikovaná v pixeloch (px) alebo percentách (%).
Farbu je možné nastaviť buď v RGB formát(Red Green Blue), alebo v HEX kóde HTML.

Nižšie sú uvedené TYPY ČIAR s ich menami:

Ako nastaviť hranice pre prvok? Robíme to nasledovne:

#blok(
border:3px solid #0085ss; /* nastaviť čiaru na hrubú modrú 3 pixely */
}

Ak chcete nainštalovať jeden, dva alebo tri rám na jednej strane, potom špecifikujte takto:

okrajový vrch- horný rám
okraj-dole- spodný rám
hranica-vľavo- rám vľavo;
hranica-pravá- rám vpravo;

Blokovať (
pravý okraj: 3px plné #0085cc;
border-bottom: 2px prerušovaná #0085cc;
}

Ak chceš odstráňte rámy element v CSS, potom napíšte do hranice vlastnosti - žiadne

prázdny(
hranica: žiadna /* prvok s prázdnou triedou nebude mať orámovanie */
}

obrys

Obrys je vlastnosť, ktorá je potrebná na nastavenie vonkajšieho okraja prvku.

Existuje dva rozdiely od hranice:
Po prvé, čiara špecifikovaná v obryse NEOvplyvní polohu samotného bloku, jeho šírku a výšku.
Po druhé, neexistuje možnosť inštalácie rámu z určitej strany.
Syntax je rovnaká ako hranica.

obrys: 2px bodkovaný #0085cc; /* orámovanie 2 px bodkovaná modrá */
Pre obrys, ako aj pre orámovanie, môžete orámovanie odstrániť tak, že napíšete žiadne:

Ďakujem za tvoju pozornosť!

Predchádzajúci článok
Lekcia 6

Hranice prvkov.

Výplň a okraje v CSS. Čo je okraj a výplň? Ďalší článok
Lekcia 8. Ako nastaviť farbu textu a pozadie prvku v CSS?

Komentáre k článku (vk.com)

hranica

Podpora prehliadača

Popis

Vlastnosť CSS vám umožňuje súčasne nastaviť šírku, štýl a farbu okraja bloku. Hranica bloku je jednoduchá čiara/rám, ktorý obklopuje blok zo všetkých strán. Treba mať na pamäti, že pri pridávaní rámu to ovplyvní celkovú veľkosť bloku.

Hodnoty sú oddelené medzerou a môžu byť v ľubovoľnom poradí, prehliadač určí, ktorá z nich zodpovedá požadovanému parametru. Nie je potrebné uvádzať všetky tri hodnoty, šírku a/alebo farbu je možné vynechať, v takom prípade sa namiesto chýbajúcej hodnoty použije hodnota, ktorá je nastavená pre predvolenú vlastnosť, t.j. ak napríklad nie je špecifikovaná žiadna šírka, použije sa predvolená hodnota vlastnosti. Tabuľka pod syntaxou zobrazuje hodnoty, ktoré vlastnosti možno použiť.

Poznámka: Ak chcete nastaviť okraje len na určitých stranách prvku, použite nasledujúce vlastnosti: border-top, border-bottom, border-left, border-right.

Tip: Pri použití okraja je spravidla potrebné pridať výplň.

CSS vlastnosť: border

Pridávajú biele miesto medzi okraj bloku a jeho obsah: text, obrázky alebo podradené značky. Obyčajne sa orámovanie zobrazuje v blízkosti obsahu prvku, čo je užitočné len vtedy, ak potrebujete okolo obrázka nastaviť orámovanie.

Syntax

border: border-width border-style border-color|dedit;

Hodnoty majetku

Príklad

Je tu nejaký text.

Výsledok tento príklad v okne prehliadača:

Ako nastaviť farbu, štýl a veľkosť okraja v rámčekoch.

V značkovacích jazykoch je hranica ( hranica), majú len tabuľky, obrázky a rámiky, v niektorých prípadoch je možné nastaviť farbu orámovania a je to.

atribút hranice

Kaskádové štýly nám dávajú viac možností, ale prvé veci.

V CSS môžeme ovládať šírku okraja (border) pomocou hraničná šírka a aby sme boli presnejší, môžeme ovládať hrúbku každej strany samostatne:
border-top-width- hrúbka horného okraja
hranica-pravá-šírka- hrúbka pravého obrubníka
border-bottom-width- hrúbka spodného okraja
border-left-width- hrúbka ľavého okraja
Dá sa však aj skrátiť:
P (šírka okraja: vpravo hore dole vľavo;)(vpravo hore dole vľavo).
Šírku okraja je možné nastaviť:
postavy DIV(border-width:5px), od nuly do nekonečna, t.j. pozitívne.
tenký- tenký okraj, DIV(šírka-okraja:tenký)
stredná- stredný okraj, DIV(šírka-okraja:stredná)
hustý- hrubý okraj, DIV(šírka-okraja:hrubý)
S číslami je to jasné, ale s týmito hodnotami to všetko závisí od prehliadača, ale stále tenký<= medium <= thick .

Farbu okraja môžeme ovládať aj pomocou farba okraja alebo presnejšie farba každej strany:
border-top-color farba horného okraja
border-right-color farba pravého okraja;
border-bottom-color farba spodného okraja;
border-left-color farba okraja na ľavej strane.
Hodnota farby je nastavená ako pre farba, t.j. jedna zo 16 farieb: vodná, čierna, modrá, fuchsiová, sivá, zelená, limetková, gaštanová, námornícka, olivová, fialová, červená, strieborná, modrozelená, biela alebo žltá, môžete tiež nastaviť farby: farba:#000000, farba:#AF0 , farba:rgb(255,0,0) alebo farba:rgb(100%, 0%, 0%).
Bez ohľadu na to, akú farebnú schému si vyberiete, prehliadače ju stále preložia farba:rgb(255,0,0). Napríklad farba: limetka = farba:#00ff00 = farba:#0F0 = farba:rgb(0%, 100%, 0%), ale na prehliadači nezáleží farba:rgb(0,255,0), t.j. vypočíta túto hodnotu.

Ak možno hrúbku a farbu orámovania ovládať aj pomocou HTML, potom štýl ( hraničný štýl) iba CSS!!!
Štýl môže byť ovládaný každou stranou samostatne:
border-top-styleštýl hornej hranice;
border-right-styleštýl pravého okraja;
border-bottom-styleštýl spodného okraja;
border-left-styleštýl ohraničenia na ľavej strane.
Teraz zvážte hodnoty štýlov:
1)border-style:none- Toto je predvolená hodnota podobná border-width:0.
2)border-style:skryté- To isté, s výnimkou tabuliek (tabuľky), ktoré zvážime neskôr.
3)Border-style:bodkovaný- Hranica bodiek.
4)border-style:prerušovaná— Ohraničenie z bodkovanej čiary.
5)Border-style:solid- Ohraničenie plnou čiarou, t.j. ako v HTML.
6)border-style:double- Okraj dvojitej plnej čiary, tu potrebujete hrúbku (šírku okraja) najmenej 3 pixely.
7)border-style:groove- Hranica vyzerá ako vyrezaná do plátna.
8)border-style:ridge— Bordúra vyzerá, akoby vyčnievala z plátna.
9)border-style:inset- Celá krabica vyzerá ako vtlačená do plátna.
10)border-style:outset- Opak predchádzajúceho.
Niektoré prehliadače môžu ignorovať bodkované, prerušované, dvojité, drážkové, ridge, inset a outset hodnoty a vydávať ich ako plné, t.j. obyčajná hranica.

To všetko je samozrejme pravda, ale všetky vyššie uvedené príklady sú iba princípom fungovania a nie mechanizmom.
Vlastnosť pravidla hranica implikuje (ohraničenie: farba štýlu veľkosti;), toto pravidlo sa vykoná, ak sú prítomné všetky tri hodnoty a iba v tomto poradí, napr. H1 (okraj: 5 pixelov, dvojitá červená;), ale môžu existovať výnimky, ak tieto hodnoty poskytujú značkovacie jazyky, napríklad pre tabuľku TABLE(ohraničenie: 2px), t.j. je uvedená iba jedna hodnota.

Aby ste spravovali nie celý obrubník, ale každú časť samostatne, existujú pravidlá:
(horný okraj: farba štýlu veľkosti;) Ovládanie horného obrubníka;
(okraj vpravo: farba štýlu veľkosti;) Ovládanie obrubníka vpravo;
(okraj-dole: farba štýlu veľkosti;) Ovládanie spodného obrubníka;
(ohraničenie vľavo: farba v štýle veľkosti ;) Ovládanie obrubníka vľavo.
Tieto pravidlá možno použiť jednotlivo alebo všetky spolu.

Výnimkou je toto pravidlo:
H1(
orámovanie: 4px plná zelená;
}
Ide o to, že v CSS má posledné pravidlo najvyššiu prioritu, v tomto prípade vlastnosť border obsahuje border-left a preto bude pravidlo border-left ignorované, takto:
H1(
orámovanie: 4px plná zelená;
border-left: 2px dvojitá červená;
}
Najprv nastavíme pravidlá pre celý obrubník a potom pre jednotlivé úseky.

Mám všetko o hraniciach prvkov, okrem toho, že niektoré vlastnosti zvážime, keď sa dostaneme k tabuľkám a iným výnimkám.

css: ohraničenie. Hranice prvkov.

Hranice CSS3

Hranice CSS3

Pomocou CSS3 môžete vytvárať zaoblené okraje, pridávať tiene do kontajnerov a používať obrázok ako okraj – a to všetko bez použitia dizajnérskeho programu, ako je Photoshop.

V tejto lekcii sa dozviete o nasledujúcich vlastnostiach ohraničenia:

• hraničný polomer
• krabicový tieň
• border-image

Podpora prehliadača

Internet Explorer 9 podporuje niektoré nové vlastnosti okrajov.

Firefox vyžaduje predponu -moz- pre border-image.

Chrome a Safari vyžadujú predponu -webkit- pre orámovaný obrázok.

Opera vyžaduje -o- pre border-image.

Safari tiež vyžaduje predponu -webkit- pre box-shadow.

Opera podporuje nové vlastnosti hraníc.

CSS3 zaoblené rohy

Pridanie zaoblených rohov v CSS2 bolo zložité. Pre každý roh sme museli použiť iné obrázky.

V CSS3 je vytváranie zaoblených rohov jednoduché.

V CSS3 sa vlastnosť border-radius používa na vytvorenie zaoblených rohov:

Tento blok má zaoblené rohy!

CSS3 Container Shadow

V CSS3 sa vlastnosť box-shadow používa na pridanie tieňa do polí:

CSS3 Border-Image

Pomocou vlastnosti border-image CSS3 môžete použiť obrázok na vytvorenie okraja:

Vlastnosť border-image vám umožňuje určiť okraj obrázka!

Pôvodný obrázok použitý na vytvorenie okraja je váš:

Nové vlastnosti hraníc

atribút hranice

atribút hranice, tag

orámovania HTML

Je prijateľné použiť okraj bez hodnôt, potom bude hrúbka okraja rovná jednému pixelu. V predvolenom nastavení sa rám zobrazuje s 3D efektmi, ale ak dodatočne použijete atribút pozadia, rám sa stane „plochým“.

Okrem toho, ak má atribút border nenulovú hodnotu, prehliadače tiež zobrazujú tenké okraje okolo samotných buniek. Zobrazenie týchto hraníc je možné ovládať pomocou atribútu rules.

hodnoty

Hodnota atribútu môže byť ľubovoľné nezáporné číslo určujúce veľkosť v pixeloch.

Predvolená hodnota: 0.

Syntax

Požadovaný atribút: žiadny.

Príklad HTML: Použitie atribútu Border

Príklad výsledku

Výsledok. Použitie atribútu border.

Michael 2016-06-11 1 HTML a CSS 0

Ako urobiť dvojitý okraj v css?

Ahojte všetci. Viete, ako urobiť dvojitý okraj v css? Ak nie, prečítajte si túto krátku poznámku. Ide o to, že to nemôžete urobiť s bežným okrajom, musíte ísť iným smerom.

Ak nastavíte hranicu pomocou vlastnosti border, môžete nastaviť iba jednu. Ale veľmi často môže dizajn vyžadovať niekoľko rámov. V tomto prípade by ste mali použiť pseudo-rám - tieň.

Dvojité orámovanie s tieňom

Vo všeobecnosti, ak chcete podrobnejšie študovať tieň v css, odporúčam vám prečítať si príslušnú tému. V tomto článku nebudem podrobne vysvetľovať syntax vlastnosti, ale jednoducho vám ukážem, ako vytvoriť dvojitý okraj. Vytvorím si teda obyčajný blok, ktorému predpíšem nejaké štýly. Blok môže byť ľubovoľný a s akýmkoľvek obsahom. V mojom prípade ide o jednoduchý div, takže html kód ani neukážem. A tu sú štýly:

Div(
pozadie: #E0D8A3;
šírka: 180px
výška: 110px;
výplň: 12px
}

No, typický príklad blokového dizajnu.
Teraz vytvoríme dvojitý okraj pomocou viacerých tieňov. Do štýlov blokov pridám nasledujúcu vlastnosť:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Takto to vyzerá:

Ako vidíte, dopadlo to celkom pekne. V box-shadow je iba 5 parametrov. Prvým je horizontálny posun tieňa, druhým je vertikálny posun. Tretím a štvrtým parametrom je rozmazanie a roztiahnutie. Ako vidíte, prvých troch sa vôbec nedotýkame. Nepotrebujeme rozostrenie, pretože potrebujeme ostrý tieň. Ako vidíte, predpísal som štvrtý parameter – strečing. Určuje, o koľko bude tieň väčší ako prvok, ku ktorému je pripojený.

V predvolenom nastavení všetko vyzerá takto - tieň má rovnakú veľkosť ako prvok a leží jasne pod ním. Ak zmeníte roztiahnutie, tieň začne vyčnievať za prvok. Takto môžete vytvoriť hranice, presne rovnaké ako vlastnosť border. No, s piatym parametrom je myslím všetko jasné - toto je farba tieňa.

Ako vidíte, jednoducho som uviedol parametre pre každý nový tieň oddelený čiarkami. Myslím, že ste už uhádli, že rovnakým spôsobom môžete vytvoriť trojitý okraj atď. Neplatia tu žiadne obmedzenia. Vlastne, pokiaľ ide o mňa, téma je uzavretá a ak máte nejaké otázky, môžete ich napísať do komentárov.

Minúta vašej pozornosti: Všetci chceme umiestniť naše stránky na spoľahlivý hosting. Analyzoval som stovky hostiteľov a našiel som toho najlepšieho - HostIQ V sieti sú o ňom stovky pozitívnych recenzií, priemerné hodnotenie používateľov je 4,8 z 5. Nech sú vaše stránky dobré.

Popis

Vlastnosť border universal umožňuje súčasne nastaviť šírku, štýl a farbu orámovania okolo prvku. Hodnoty môžu byť v ľubovoľnom poradí, oddelené medzerou, prehliadač určí, ktorá z nich zodpovedá požadovanej vlastnosti. Ak chcete nastaviť orámovanie len na určitých stranách prvku, použite vlastnosti border-top , border-bottom , border-left , border-right .

Syntax

hodnoty

Hodnota border-width určuje šírku okraja. Na ovládanie jeho vzhľadu je k dispozícii niekoľko hodnôt v štýle okrajov. Ich mená a výsledok akcie sú znázornené na obr. jeden.

Obr.1. Štýly rámov

border-color nastavuje farbu orámovania, hodnota môže byť v akomkoľvek platnom CSS formáte.

dediť dedí hodnotu rodiča.

HTML5 CSS2.1 IE Cr Op Sa Fx

V tomto príklade je okolo vrstvy pridaný dvojitý okraj. Výsledok je znázornený na obr. 2.

Ryža. 2. Použitie vlastnosti hranice

Objektový model

document.getElementById("elementID ").style.border

Prehliadače

Internet Explorer do verzie 6 vrátane sa vykresľuje bodkovaný ako prerušovaný so šírkou okraja 1 pixel. Pri veľkosti 2 pixely a viac bodkovaná hodnota funguje správne. Táto chyba bola opravená v IE7, ale len pre všetky 1px okraje. Ak má jeden z okrajov rámčeka 2 pixely alebo hrubšie, v IE7 bude bodkovaný prerušovaný.

Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.

Štýl orámovania sa môže medzi prehliadačmi mierne líšiť pri použití hodnôt groove , ridge , inset alebo outset .

Popis

Vlastnosť border universal umožňuje súčasne nastaviť šírku, štýl a farbu orámovania okolo prvku. Hodnoty môžu byť v ľubovoľnom poradí, oddelené medzerou, prehliadač určí, ktorá z nich zodpovedá požadovanej vlastnosti. Ak chcete nastaviť orámovanie len na určitých stranách prvku, použite vlastnosti border-top , border-bottom , border-left , border-right .

Syntax

hodnoty

Hodnota border-width určuje šírku okraja. Na ovládanie jeho vzhľadu je k dispozícii niekoľko hodnôt v štýle okrajov. Ich mená a výsledok akcie sú znázornené na obr. jeden.

Obr.1. Štýly rámov

border-color nastavuje farbu orámovania, hodnota môže byť v akomkoľvek platnom CSS formáte.

dediť dedí hodnotu rodiča.

HTML5 CSS2.1 IE Cr Op Sa Fx

V tomto príklade je okolo vrstvy pridaný dvojitý okraj. Výsledok je znázornený na obr. 2.

Ryža. 2. Použitie vlastnosti hranice

Objektový model

document.getElementById("elementID ").style.border

Prehliadače

Internet Explorer do verzie 6 vrátane sa vykresľuje bodkovaný ako prerušovaný so šírkou okraja 1 pixel. Pri veľkosti 2 pixely a viac bodkovaná hodnota funguje správne. Táto chyba bola opravená v IE7, ale len pre všetky 1px okraje. Ak má jeden z okrajov rámčeka 2 pixely alebo hrubšie, v IE7 bude bodkovaný prerušovaný.

Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.

Štýl orámovania sa môže medzi prehliadačmi mierne líšiť pri použití hodnôt groove , ridge , inset alebo outset .

Všeobecná vlastnosť border sa používa na ovládanie okraja prvku. Táto vlastnosť vám umožňuje nastaviť šírku, štýl a farbu okraja prvku v jednej deklarácii.

Tieto tri vlastnosti (šírka, štýl a farba orámovania) je možné nastaviť v jednej deklarácii. Tu je príklad:

Štýl orámovania môžete určiť len na jednej strane prvku. Na to použite vlastnosti border-top (horný okraj), border-right (pravý okraj), border-bottom (dolný okraj), border-left (ľavý okraj).

V tomto príklade má každá strana bloku svoju vlastnú hrúbku, štýl a farbu okraja.

Zvážte použitie CSS na vytvorenie tvaru, ako je tento:

Hodnoty okrajov - hrúbka, štýl a farba - je možné nastaviť samostatne pomocou špeciálnych vlastností.

• border-style - štýl hranice.
• border-width - šírka okraja.
• border-color - farba okraja.

Zvážme každú z hodnôt samostatne.

Nehnuteľnosť v štýle hraníc. Štýl okrajov.

Vlastnosť border-style nastavuje štýl ohraničenia. V CSS, na rozdiel od HTML, môže byť okraj prvku viac než len pevný. Platné hodnoty pre štýl orámovania sú:

1. none - bez okraja (predvolené).
2. pevná - pevná hranica.
3. dvojitý - dvojitý okraj.
4. prerušovaná - bodkovaná hranica.
5. bodkovaný – hranica tvorená radom bodiek.
6. hrebeň - "hrebeň" hranica.
7. drážka - okrajová "drážka".
8. inset - vsadená hranica.
9. začiatok - vytlačená hranica.

Príklady, ako vyzerajú.

žiadna hranica (žiadna)

pevný okraj (pevný)

dvojité ohraničenie (dvojité)

bodkovaný okraj (bodkovaný)

bodkovaný okraj (prerušovaný)

okraj drážky (drážka)

hrebeňová hranica

odsadený okraj (vložka)

extrudovaný okraj (začiatok)

Mimochodom, ak nastavíte farbu okraja na čiernu pre hrebeňový rám, dostanete nasledujúci výsledok.

Blok div s čiernym okrajom a hrebeňovým štýlom.

Okraj vyzerá ako plný , ale je to preto, že štýl hrebeňa je vytvorený pridaním efektu čierneho tieňa a čierny efekt na čiernom okraji nie je viditeľný.

Pomocou vlastnosti border-style je možné nastaviť štýl ohraničenia nielen pre všetky strany bloku. Pre rovnakú vlastnosť štýlu orámovania je možné nastaviť viacero hodnôt, v závislosti od počtu hodnôt bude štýl orámovania priradený k inému počtu strán bloku. Môžete nastaviť jednu, dve, tri alebo štyri hodnoty. Pozrime sa na príklady pre každý prípad.

Jedna hodnota (plná) – štýl orámovania je nastavený pre všetky strany bloku.

Dve hodnoty (plné dvojité) - prvá hodnota nastavuje štýl pre hornú a spodnú stranu, druhá pre stranu.

Tri hodnoty (plné dvojité bodky) - prvá hodnota pre hornú stranu, druhá pre strany, tretia pre spodnú stranu.

Štyri hodnoty (plné dvojité bodkované prerušované) - každá hodnota pre jednu stranu v smere hodinových ručičiek zhora.

Vlastnosť so šírkou hranice. Hrúbka okraja.

Vlastnosť border-width sa používa na nastavenie šírky okraja prvku. Hrúbku okraja je možné zadať v akejkoľvek absolútnej mernej jednotke, napríklad v pixeloch.

Rovnako ako vlastnosť v štýle okraja, aj vlastnosť môže byť nastavená na jednu až štyri hodnoty. Zvážte príklady pre každý prípad.

Príklad kódu:

Existujú aj hodnoty kľúčových slov pre vlastnosť border-width. Celkovo sú tri:

• tenký - tenký okraj;
• stredná - stredná hrúbka;
• hrubá - hrubá hranica;

Hrúbka okraja: tenký.

Hrúbka okraja: stredná.

Hrúbka okraja: hrubá.

Vlastnosť border-color. Farba okraja.

Funkcia border-color sa používa na kontrolu farby okraja. Farby pre túto vlastnosť je možné nastaviť pomocou ktorejkoľvek z metód opísaných v článku Farby v CSS, konkrétne:

• Šestnástkový zápis (#ff00aa ) farby.
• Formát RGB je rgb(255,12,110) . Formát RGBA pre CSS3.
• Formáty HSL a HSLA pre CSS3.
• Názov farby, napríklad čierna (black). Úplný zoznam názvov farieb nájdete v tabuľke Názvy farieb CSS.

Vlastnosť border-color môže mať tiež jednu až štyri hodnoty a zaobchádza s nimi podobne ako s predchádzajúcimi vlastnosťami.

Jedna hodnota (červená).

Dve hodnoty (červená čierna).

Tri hodnoty (červená čierna žltá).

Štyri hodnoty (červená čierna žltá modrá).

Teraz sa vráťme k vyššie uvedenej úlohe a nakreslite obrázok:

Tu je kód, ktorý nakreslí takýto tvar, len väčší:

Nastavenie hodnôt pre strany samostatne

Ako je uvedené vyššie, hodnoty vlastností okraja môžete zadať iba pre jednu stranu poľa. Na tieto účely existujú vlastnosti:

• border-top (horný okraj)
• pravý okraj (pravý okraj)
• border-bottom (spodný okraj)
• ľavý okraj (ľavý okraj)

Dovoľte mi pripomenúť, že pre všetky vlastnosti sú špecifikované tri hodnoty (hrúbka, štýl a farba) v ľubovoľnom poradí. Existujú ale vlastnosti, ktoré umožňujú nastaviť hrúbku, farbu a štýl pre každú stranu zvlášť. Zápis týchto vlastností je odvodený od vyššie uvedeného.

Možnosti horného okraja (border-top ).

• border-top-color – nastavuje farbu horného okraja prvku.
• border-top-width – nastavuje šírku horného okraja prvku.
• border-top-style - nastavuje štýl horného okraja prvku.

Možnosti pravého okraja (okraj-vpravo ).

• border-right-color - nastavuje farbu pravého okraja prvku.
• border-right-width - nastavuje šírku pravého okraja prvku.
• border-right-style – nastavuje štýl pravého okraja prvku.

Možnosti spodného okraja (border-bottom ).

• border-bottom-color – nastavuje farbu spodného okraja prvku.
• border-bottom-width - nastavuje šírku spodného okraja prvku.
• border-bottom-style – nastavuje štýl spodného okraja prvku.

Možnosti ľavého okraja (okraj-vľavo).

• border-left-color – nastavuje farbu ľavého okraja prvku.
• border-left-width - nastavuje šírku ľavého okraja prvku.
• border-left-style – nastavuje štýl ľavého okraja prvku.

Príklad použitia týchto vlastností:

Vlastnosť border-radius. Zaoblenie rohov hranice.

Vlastnosť border-radius slúži na zaoblenie rohov okrajov prvku. Táto vlastnosť bola zavedená v CSS3 a funguje správne vo všetkých moderných prehliadačoch okrem Internet Explorera 8 (a starších verzií).

Hodnoty môžu byť ľubovoľné číslo používané v CSS.

vlastnosť border-radius: 15px.

Ak nie je nastavený blokový rámec, potom sa zaokrúhľuje s pozadím. Tu je príklad zaokrúhlenia bloku bez okraja, ale s farbou pozadia:

vlastnosť border-radius: 15px.

Existujú vlastnosti na zaoblenie každého jednotlivého rohu prvku. Tento príklad používa všetky z nich:

border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

vlastnosť border-radius: 15px.

Hoci tento kód môže byť napísaný v jednej deklarácii: border-radius : 15px 0 15px 0 . Faktom je, že pre vlastnosť border-radius môžete nastaviť jednu až štyri hodnoty. V tabuľke nižšie sú zhrnuté pravidlá, ktorými sa takéto vyhlásenia riadia.

Pozorným preštudovaním tejto tabuľky pochopíte, že najkratšia položka pre požadovaný štýl bude: border-radius : 15px 0 . Sú len dve hodnoty.

Trochu praxe

Nakreslite citrón pomocou CSS.

Tu je kód pre takýto blok:

Okraj: 0 auto; /* Vycentrovať blok */ šírka: 200px; výška: 200px; pozadie: #F5F240; orámovanie: 1px plný #F0D900; border-radius: 10px 150px 30px 150px;

Obrázok sme už nakreslili:

Teraz z toho nechajme trojuholník:

Kód trojuholníka je:

Okraj: 0 auto; /* Vycentrovať blok */ padding: 0px; šírka: 0px výška: 0; orámovanie: 30px plná biela; farba okraja-dola: červená;