Domov › Služby › Ohraničení CSS: poloměr, barva, styl a další vlastnosti okraje CSS. Zdobení rámečků a okrajů prvků HTML pomocí vlastností CSS. barva ohraničení

Ohraničení CSS: poloměr, barva, styl a další vlastnosti okraje CSS. Zdobení rámečků a okrajů prvků HTML pomocí vlastností CSS. barva ohraničení

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; )