CSS box model. Dvojité ohraničení pomocí CSS

Rámeček CSS3 doplňuje možnost formátovat hranice prvků vlastnostmi, které to umožňují za rohy prvek a také použití snímky navrhnout okraje prvku.

Zaoblené rohy a obrazové rámy

1. Zaoblení rohů s hraničním rádiusem

Podpora prohlížeče

TJ: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Prohlížeč Android: 4.1
Chrome pro Android: 44

Tato vlastnost umožňuje zaoblit rohy vložených a blokových prvků. Křivka pro každý úhel je definována pomocí jednoho nebo dvou poloměrů definujících jeho tvar − kruh nebo elipsa. Poloměr se vztahuje na celé pozadí, i když prvek nemá žádné ohraničení, přesná poloha sečny je určena pomocí vlastnosti background-clip.

Vlastnost border-radius umožňuje zaoblit všechny rohy najednou a pomocí vlastností border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius lze zaoblit každý roh zvlášť.

Pokud nastavíte dvě hodnoty pro vlastnost border-radius, první hodnota zaokrouhlí vlevo nahoře A pravý dolní roh a druhý - vpravo nahoře A vlevo dole.

Hodnoty specifikované prostřednictvím / určují horizontální A vertikální poloměry. Nemovitost se nedědí.

Možnosti

Div (šířka: 100px; výška: 100px; ohraničení: 5px plný;).r1 (poloměr okraje: 0 0 20px 20px;).r2 (poloměr okraje: 0 10px 20px;).r3 (poloměr okraje: 10px 20px ;-) ( border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 ( border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;)
Rýže. 1. Příklady různých možností zaoblení rohů bloků

2. Hraniční obrázek

Podpora prohlížeče

TJ: 11.0
Firefox: 15,0, 3,5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15,0, 11,0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Prohlížeč Android: 4.4, 4.1 -webkit-
Chrome pro Android: 42

Tato vlastnost umožňuje nastavit obrázek jako rámeček prvku. Hlavním požadavkem na obrázek je, že musí být symetrický. Vlastnost obsahuje následující hodnoty: (border-image: šířka zdrojového řezu opakování začátku;) .

Pomocí takového jednoduchého obrázku můžete získat takové rámečky pro prvek.

/* Příklad 1 */ div ( šířka: 260px; výška: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch ) /* Příklad 2 */ div ( šířka: 260px; výška: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png);
Rýže. 2. Příklad návrhu hranic bloku pomocí obrázku

Řezy A - B - C - D tvoří rohy rámu a část obrázku umístěná mezi nimi vyplní zbývající prostor rámu v souladu se zadanou hodnotou vlastnosti border-image-repeat. Velikost rohového dílu (v tomto příkladu číslo 30) se nastavuje pomocí hodnoty vlastnosti border-image-slice.

2.1. border-image-width

Vlastnost určuje šířku obrázku pro ohraničení prvku. Pokud není šířka zadána, výchozí je 1.

border-image-width
Hodnoty:
délka	Nastaví šířku okraje v jednotkách délky - px/em. Můžete nastavit jednu až čtyři hodnoty najednou. Pokud je zadána jedna hodnota, pak je šířka všech stran rámu stejná, dvě hodnoty určují šířku nahoře-dole a vpravo-vlevo atd.
číslo	Číselná hodnota, kterou se násobí hodnota šířky ohraničení.
%	Šířka okraje prvku se vypočítá vzhledem k velikosti obrázku. Horizontální vzhledem k šířce, vertikální - vzhledem k výšce.
auto	Odpovídá hodnotě border-image-slice.
počáteční
zdědit

Syntax

Div (šířka okraje-obrazu: 30px;) Obr. 3. Příklad nastavení šířky rámečku obrázku pomocí různých typů hodnot

2.2. border-image-source

Vlastnost určuje cestu k obrázku, který bude použit k ozdobení okrajů bloku.

Syntax

Div (border-image-source: url(border.png);)

2.3. prvky border-image-slice

Tato vlastnost určuje velikost částí obrázku použitých k definování hranic prvku a rozděluje obrázek na devět částí: čtyři rohy, čtyři okraje mezi rohy a středovou část.

Hodnoty:
číslo	Velikost částí rámu lze nastavit pomocí jedné, dvou, tří nebo čtyř hodnot. Jedna hodnota nastavuje ohraničení na stejnou velikost na každé straně prvku. Dvě hodnoty: první určuje velikost horního a spodního okraje, druhá - pravý a levý. Tři hodnoty: první určuje velikost horního okraje, druhá - pravý a levý a třetí - spodní okraj. Čtyři hodnoty: Definuje velikosti horního, pravého, spodního a levého okraje. Číselná hodnota představuje počet px.
%	Velikosti okrajů se počítají vzhledem k velikosti obrázku. Horizontální vzhledem k šířce, vertikální - vzhledem k výšce.
vyplnit	Hodnota je uvedena spolu s číslem nebo procentem. Pokud je zadáno, obraz nebude oříznut vnitřním okrajem rámečku, ale také vyplní oblast uvnitř rámečku.
počáteční	Nastaví tuto vlastnost na výchozí hodnotu.
zdědit	Zdědí hodnotu této vlastnosti z nadřazeného prvku.

Syntax

Div (ohraničení výřezu obrázku: 50 20;)
Rýže. 4. Příklad určení řezů rámečku obrazu

2.4. ohraničení-obrázek-opakovat

Tato vlastnost řídí, jak obrázek na pozadí vyplní prostor mezi rohy rámu. Lze zadat pomocí jedné hodnoty nebo dvojice hodnot.

Syntax

Div (border-image-repeat: repeat;) Obr. 5. Příklad opakování střední části rámečku obrazu s použitím různých typů hodnot

2.5. border-image-outset

Tato vlastnost umožňuje posunout rámeček obrázku za hranice prvku o zadanou délku. Lze zadat pomocí jedné nebo čtyř hodnot.

Syntax

Div (border-image-outset: 10px;)
Rýže. 6. Příklad posunutí rámečku obrazu pomocí různých typů hodnot

3. Odsazení vnějšího rámu obrys-offset

Vlastnost určuje vzdálenost mezi okrajem prvku border a vnějším okrajem vytvořeným pomocí vlastnosti obrys.

/*Obrázek 1:*/ img ( border: 1px plný růžový; obrys: 1px přerušovaná šedá; obrys-offset: 3px; ) /*Obrázek 2:*/ img ( border-width: 1px 10px; border-style: solid; border-color: pink obrys: 1px přerušovaný šedý obrys: 3px;
Rýže. 7. Příklad zdobení obrazu vnějším rámem

4. Přechodový rám

Hodnotou border-image může být nejen obrázek, ale také přechodová výplň.

Průsvitný rám

Transparentní je jednou z barev. Tímto způsobem můžete nastavit hranice pro všechny strany prvku najednou nebo samostatně pro každou stranu. Tloušťka ohraničení je řízena vlastností border-width.

* (box-sizing:border-box;).wrap (výška: 200px; odsazení: 25px; pozadí: #00E4F6; ) .gradient (výška: 150px; šířka: 50%; okraj: 0 auto; okraj: 10px plný průhledný ; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%);

Poštovní obálka

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient (45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px)

Ohraničení CSS Prvek je jedna nebo více čar obklopujících obsah prvku a jeho odsazení. Hranice se určuje pomocí vlastnosti zkrácené hranice. Styl rámu se nastavuje pomocí tří vlastností: styl, barva A šířka.

Zdobení rámečků a okrajů prvků HTML pomocí vlastností CSS

1. Hraniční styl

Ve výchozím nastavení se rámečky vždy kreslí na pozadí prvku, přičemž pozadí zasahuje až k vnějšímu okraji prvku. Styl rámečku určuje jeho zobrazení bez této vlastnosti, rámečky nebudou vůbec viditelné. U prvku můžete nastavit ohraničení pro všechny strany současně pomocí vlastnosti border-style nebo pro každou stranu zvlášť pomocí kvalifikačních vlastností border-top-style atd. Neděděno.

hraniční styl (border-top-style, border-right-style, border-bottom-style, border-left-style)
Hodnoty:
žádný	Výchozí hodnota znamená žádný rámec. Také odebere rámec prvku ze skupiny prvků s hodnotou této sady vlastností.
skrytý	Ekvivalent k žádnému.
tečkovaný	tečkovaný
čárkovaná	čárkovaná
pevný	pevný
dvojnásobek	dvojnásobek
drážka	drážka
hřbet	hřbet
vložka	vložka
začátek	začátek
{1,4}	Výpis čtyř různých stylů pro ohraničení prvku najednou, pouze pro vlastnost border-style: (styl ohraničení: plné tečkované žádné tečkované;)
počáteční
zdědit

Syntax

P (styl ohraničení: plný;) p (styl ohraničení: plný;)

2. Barva rámu border-color

Vlastnost nastavuje barvu rámečků na všech stranách současně. Pomocí vlastností zjasnění můžete nastavit jinou barvu pro ohraničení každé strany prvku. Pokud pro rámeček není specifikována žádná barva, bude stejná jako barva textu prvku. Pokud prvek neobsahuje žádný text, barva ohraničení bude stejná jako barva textu nadřazeného prvku. Neděděno.

barva ohraničení (border-top-color, border-right-color, border-bottom-color, border-left-color)
Hodnoty:
průhledný	Nastaví průhlednou barvu okraje. Šířka rámu přitom zůstává zachována. Lze použít ke změně barvy ohraničení při najetí myší na prvek, aby nedošlo k posunutí prvku.
barva	Barva rámečků se nastavuje pomocí hodnot vlastnosti. (barva ohraničení: #cacd58;)
{1,4}	Výpis čtyř různých barev pro ohraničení prvku najednou, pouze pro vlastnost border-color: (barva ohraničení: #cacd58 #5faf8a #b9cea5 #aab238;)
počáteční	Nastaví hodnotu vlastnosti na výchozí hodnotu.
zdědit	Zdědí hodnotu vlastnosti z nadřazeného prvku.

Syntax

P (barva ohraničení: #cacd58;)

3. Šířka okraje

Šířka rámce se určuje pomocí jednotek délky nebo klíčových slov. Pokud je vlastnost border-style nastavena na none a okraj prvku je nastaven na určitou šířku, pak je v tomto případě šířka okraje nastavena na nulu. Neděděno.

Syntax

P (šířka okraje: 2px;)

4. Nastavení rámce s jednou vlastností

Vlastnost border vám umožňuje kombinovat následující vlastnosti: border-width , border-style , border-color , například:

Div ( šířka: 100px; výška: 100px; ohraničení: 2px plná šedá; )

V tomto případě budou zadané vlastnosti aplikovány na všechny okraje prvku současně. Pokud není zadána žádná hodnota, nahradí ji výchozí hodnota.

5. Nastavení rámečku pro jeden okraj prvku

V případech, kdy potřebujete pro prvek určit jiný styl ohraničení, můžete pro odpovídající ohraničení použít zkrácený zápis.
Vlastnosti uvedené níže kombinují následující vlastnosti do jediné deklarace: border-width , border-style a border-color . Seznam vlastností je specifikován v daném pořadí, přičemž jednu nebo dvě hodnoty lze přeskočit, v takovém případě jejich hodnoty nabudou výchozích hodnot.

Styl horního ohraničení se nastavuje pomocí vlastnosti border-top, bottom- border-bottom , left- border-left a right- border-right .

Syntax

P (horní ohraničení: 2 pixely plné šedé;)

6. Vnější obrys obrysu

Vlastnost určuje vnější ohraničení kolem prvků (tj. mimo normální ohraničení). Hlavním účelem této vlastnosti je zvýraznit prvek. Na rozdíl od vlastnosti border neovlivňuje použití této vlastnosti velikost ani polohu prvku, protože obrys se zobrazí v horní části rámečku prvku, což může mít za následek překrytí vnější výplně prvku a sousedních oblastí.

Také vnější obrys, na rozdíl od rámu prvku, obklopuje prvek ze všech stran a celý jej rámuje.

Vnější obrys je vždy obdélníkový a nesleduje hranici bloku, pro který je určen border-radius.

Vlastnost obrys umožňuje kombinovat následující vlastnosti: obrys-barva , styl obrysu , šířka-nákresu . Pokud není zadána žádná hodnota, nahradí ji výchozí hodnota.

Div ( šířka: 100px; výška: 100px; obrys: #cacd58 solid 2px; )

6.1. obrysový styl

Vzhled vnější obrysové čáry se nastavuje podobně jako styl rámečku prvku. Neděděno.

Syntax

P (styl obrysu: hřeben;)

6.2. Barva vnějšího obrysu obrys-barva

Barvu vnějšího obrysu lze zadat pouze v případě, že je nastavena hodnota stylu obrysu. Neděděno.

Syntax

P ( styl obrysu: hřeben; barva obrysu: stříbrná; )

6.3. Vnější tloušťka obrysu obrys-šířka

Tloušťka vnější obrysové čáry se nastavuje podobně jako tloušťka rámu prvku. Neděděno.

Syntax

P ( styl obrysu: tečkovaný; šířka obrysu: 5 pixelů; )

Dobrý den všem. Alexey Gulynin je v kontaktu. V minulém článku jste se naučili stylizovat text v CSS. V tomto článku bych vám rád řekl, co to je rámce v CSS a jak je používat. Pravidla upravující rám se skládají ze tří prvků: tloušťka rámu, styl a barva. Vytvořme soubor index.html s následujícím obsahem:

Na stejné stránce nastavíme styly pro blok s id = tester (uvnitř záhlaví stránky přidáme následující řádky):

Vlastnost border-width je zodpovědná za šířku ohraničení, vlastnost border-style odpovídá za styl ohraničení a vlastnost border-color je zodpovědná za barvu ohraničení. U první a třetí vlastnosti je vše jasné. Všechny hodnoty, které může vlastnost border-style nabývat, jsou zobrazeny na obrázku níže:

Pokud nyní otevřeme naši stránku v prohlížeči, uvidíme, že se kolem bloku objevil plný červený rámeček o šířce 1px.

Ukázal jsem vám dlouhý záznam v CSS (tento záznam je velmi těžkopádný a obvykle ho nikdo nepoužívá). Všechny instrukce mohou být obsaženy na jednom řádku. V našem případě to bude vypadat takto:

Ohraničení:1px plná červená;

Tito. Nejprve označíme tloušťku rámu, poté označíme styl a barvu rámu.

Pravděpodobně jste si všimli, že se rám objevil na všech čtyřech stranách. Rámy lze nastavit pro kteroukoli stranu samostatně (bude to jasné na konkrétním příkladu):

Horní okraj: 2px plná červená; border-bottom: 3px zelené tečkované; border-left: 6px přerušovaná žlutá; border-right: 5px double #fe54e5;

Můžete vidět, že všechny 4 strany mají různé rámečky. Pokud pro některou stranu neurčíte rám, pak tam žádný rám nebude.

Rámy se používají naprosto všude: je téměř obtížné najít design webu, který rámce nepoužívá. Velmi často jsou položky nabídky odděleny svislou čarou, která je určena vlastností border-right nebo border-left. Můžete také vytvářet zajímavé efekty pro odkazy. Domácí úkol právě na toto téma:

Musíte vytvořit stránku a umístit na ni 2 odkazy. Styl designu těchto odkazů je plná čára, po najetí myší by tato čára měla být tečkovaná.

Velmi dobré je také při rozvržení stránky používat rámečky pro prvky, abyste lépe pochopili, kde se který prvek nachází. Alespoň je pro mě mnohem jasnější a jasnější dělat rozvržení tímto způsobem.

V procesu navrhování webových stránek se mnoho začínajících tvůrců webových stránek zajímá, jak změnit písmo, velikost a barvu nadpisů. Ano, toto je opravdu skvělá volba, se kterou můžete svému designu webu dodat svěžest. Ale je tu další stejně zajímavá otázka: jak vytvořit html rámec.

K čemu je html rámec?

Ve skutečnosti tento prvek nemá žádnou speciální funkci. Ale přesto text, uzavřený v atraktivně řešeném rámu, vzbuzuje u čtenářů jistý zájem. Rámeček kolem textu lze tedy bezpečně nazvat jedním ze způsobů, jak zdůraznit důležitost zarámovaného textu.

Funkce vytváření rámečku kolem textu

Samozřejmě existuje mnohem více variant v designu rámců pomocí CSS, ale to je úplně jiný příběh. Tato metoda je navíc vhodná pro pokročilejší tvůrce stránek. Myslím, že s pomocí úpravy html kódu získáme vy i já stejně krásný html rámec.

V první fázi musíte pochopit, že pro každý prvek html lze vytvořit rámec, bez ohledu na to, o jaký typ značky se jedná

,

, , atd.

Na druhé straně je rozdíl mezi rámy inline a blokových prvků.

Rámeček vestavěného typu je umístěn uvnitř značek, nebo přesněji, html kód zodpovědný za jeho zobrazení je uzavřen mezi určité značky. Výsledkem je, že kolem textu získáme html rámeček, pro který musíme napsat určité příkazy pro nastavení vnitřního odsazení.

Blokové rámce jsou vytvořeny přes celou šířku bloku, což vyvolává potřebu zadat příkazy související s omezením šířky.

Samozřejmě, abychom mohli vytvořit text v html rámci, budeme se muset obrátit na vestavěné styly. Tento způsob bude nejvhodnější pro zvýraznění některých jednotlivých frází, odstavců v textu a obrázcích. Pokud potřebujete zvýraznit určitou část šablony, která je zobrazena na všech stránkách webu, je rozumné upravit soubor style.css šablony.

Jak vytvořit rámeček kolem textu v html

Myslím, že teorie je dost. Je čas cvičit. Jako příklad uvedu jednu z důležitých vět tohoto článku do zářivě světle zeleného rámečku s šedým pozadím.

Důležitý bod! Vestavěné styly fungují perfektně a nepoškozují HTML validitu webu.

Chcete-li implementovat stejný rámec, musíte se obrátit na značku

TVŮJ NÁVRH.

Protože tento příklad používal vestavěné styly CSS, myslím, že je stejně důležité seznámit vás s každým z nich.

1. okraj– vlastnost zodpovědná za zobrazení rámu. Pro zjednodušení úlohy jsem neuváděl každou vlastnost zvlášť - border-width (tloušťka okrajů rámečku), border-color (html barva rámečku). Místo toho jsem trochu zkrátil html kód tím, že jsem všechny vlastnosti napsal za dvojtečku.

Chcete-li změnit vzhled rámečku, stačí změnit hodnotu pevný. Existují následující hranice rámců:

Hřeben – reliéf.

Tečkovaný - tečkovaný.

Dvojité - dvojité.

Přerušovaná - tečkovaná.

Pevný - pevný.

2. vycpávka– vlastnost odpovědná za vzdálenost mezi rámem a předmětem v něm uzavřeným.

Pokud chcete, můžete si pohrát se styly trochu více přidáním příkazů uzavřených mezi otevírací a zavírací tag

Vlastnictví okraj. Tímto způsobem můžete odsadit prvky, které jsou mimo rám.

Chcete-li změnit pozadí, stačí nastavit vlastnost background-color označující kód požadované barvy za dvojtečkou.

Rámeček kolem html obrázku je proveden stejným způsobem, takže byste s ním neměli mít žádné problémy. Jediná věc, kterou začátečník potřebuje vědět, je, že aby se to zobrazilo, musí být vlastnosti zapsány v jediném tagu .

Abychom to shrnuli, můžeme říci, že k vytvoření rámečku kolem obrázku nebo textu stačí otevřít zobrazení html kódu článku a napsat do něj speciální vlastnosti mezi určité značky.

Děkuji za pozornost a brzy na viděnou na stránkách Stimylrosta.

Našli jste v textu gramatickou chybu? Nahlaste to prosím administrátorovi: vyberte text a stiskněte kombinaci kláves Ctrl+Enter

Vlastnost CSS border se používá k vytvoření ohraničení objektu, konkrétně tloušťky ohraničení, jeho barvy a stylu. Tato vlastnost je široce používána v HTML. Pro lepší vnímání obsahu stránky můžete vytvářet různé efekty. Navrhněte například postranní panel, záhlaví webu, nabídku atd.

1. Syntaxe ohraničení CSS

okraj : border-width border-style border-color | zdědit;

• border-width - tloušťka okraje. Můžete jej nastavit v pixelech (px) nebo použít standardní hodnoty tenký, střední, tlustý (liší se pouze šířkou v pixelech)
• border-style - styl zobrazeného ohraničení. Může nabývat následujících hodnot
  • žádné nebo skryté - zruší hranici
  • tečkovaný - tečkovaný rámeček
  • čárkovaný - rám vyrobený z čárek
  • plná - jednoduchá čára (nejčastěji používaná)
  • dvojitý - dvojitý rám
  • drážka - drážkovaný 3D okraj
  • hřeben, vložka, začátek - různé efekty 3D rámu
  • dědit - použije se hodnota nadřazeného prvku
• border-color - barva okraje. Lze zadat pomocí konkrétního názvu barvy nebo ve formátu RGB (viz html názvy barev pro web)

Poznámka

Hodnoty ve vlastnosti CSS border lze nastavit v libovolném pořadí. Nejčastěji používanou sekvencí je „barva stylu tloušťky“.

2. Příklady s různými hranicemi CSS

2.1. Příklad. Různé styly designu ohraničení styl ohraničení

styl ohraničení: čárkovaný

styl ohraničení: čárkovaný

styl ohraničení: pevný

border-style: double

border-style: groove

border-style: hřeben

styl ohraničení: vložka

border-style:outset

Čtyři různé rámečky

styl ohraničení: tečkovaný

styl ohraničení: čárkovaný

styl ohraničení: pevný

border-style: double

border-style: groove

border-style: hřeben

styl ohraničení: vložka

border-style:outset

Čtyři různé rámečky

2.2. Příklad. Změňte barvu rámečku při najetí myší

Tento příklad je velmi jednoduchý, ale zajímavý. Ukazuje, jak lze pseudotřídu :hover a okraj CSS použít k vytvoření jednoduchých efektů (jako jsou nabídky).

Když najedete myší na blok, barva rámečku se změní

Na stránce to vypadá takto:

2.3. Příklad. Jak vytvořit průhledný okrajový rám

Rám může být průhledný. Tento efekt je vzácný, ale někdy může být velmi užitečný pro webové designéry. Pro nastavení průhlednosti je potřeba použít nastavení barev ve tvaru RGBA (R, G, B, P), kde poslední parametr nastavuje průhlednost (skutečné číslo od 0,0 do 1,0)

Na stránce to vypadá takto:

3. Tloušťka okraje: vlastnost šířky okraje

Nastaví tloušťku čáry. Dříve jsme jej specifikovali v jediném popisu hranice.

Syntaxe šířky ohraničení CSS

šířka okraje: tenký | střední | tlustý | význam;

• tenký - tloušťka tenké čáry
• střední - průměrná tloušťka čáry
• tlustá - tloušťka tlusté čáry

Níže jsou uvedeny některé příklady. Nejneobvyklejší bude rozdílná tloušťka okraje na každé straně.

šířka okraje: tenký

šířka okraje: střední

šířka okraje: tlustý

Různá tloušťka na okrajích

Na stránce to vypadá takto:

šířka okraje: tenký

šířka okraje: střední

šířka okraje: tlustý

Různá tloušťka na okrajích

4. Jak vyrobit okrajový rámeček pouze na jedné hraně (border)

Vlastnost CSS border má odvozené vlastnosti pro nastavení jednostranného ohraničení prvku:

• border-top - pro nastavení okraje nahoře (horní okraj)
• border-bottom - pro nastavení okraje dole (spodní okraj)
• border-right - pro nastavení okraje vpravo (pravý okraj)
• border-left - pro nastavení okraje vlevo (levý okraj)

Tyto hranice lze kombinovat, tzn. Napište svůj vlastní rám pro každý směr. Syntaxe je úplně stejná jako border.

Existují také vlastnosti

• border-top-color - nastavte barvu horního okraje
• border-top-style - nastavení stylu horního okraje
• border-top-width - nastavení tloušťky horního okraje
• atd. pro každý směr

Podle mého názoru je snazší napsat vše na řádek, než vytvářet další text ve stylech. Například následující vlastnosti budou stejné

/* Popis dvou stejných stylů: */

4.1. Příklad. Krásný rám pro zvýraznění citátů

Příklad rámečku s citací

Na stránce to vypadá takto:

Příklad rámečku s citací

Poznámka
Pro každou stranu můžete nastavit samostatný okraj.

5. Jak přidat více okrajů k prvku html

Někdy je potřeba vytvořit několik okrajů. Uveďme příklad

5.1. První možnost s více okraji

Na stránce to vypadá takto:

Existuje druhá cesta přes stínování.

5.2. Překryjte stíny a vytvořte více okrajů

Na stránce to vypadá takto:

6. Zaoblení rohů na okrajích (poloměr okraje)

Chcete-li vytvořit krásné okraje, použijte vlastnost border-radius CSS (dostupná pouze v CSS3). Lze s ním vytvořit zaoblené rohy, čímž vznikne úplně jiný vzhled. Například

7. CSS Odsazená čára

Depresivní linie mohou vypadat působivě na tmavém pozadí, což není vhodné pro každé místo.

---

Na stránce to vypadá takto:

Chcete-li získat přístup k hranici z JavaScriptu, musíte napsat následující konstrukci:

document.getElementById("elementID").style.border="HODNOTA"(!JAZYK: