IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

border-image-width - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti border-image-width nastavujeme šířku rámečku s obrázkem. Vlastnost se dědí.

Syntaxe

Atribut border-image-width můžeme deklarovat několika způsoby. Pokud zadáme jen jednu hodnotu, šířka rámečku je na každé straně stejná.

border-image-width: 30px;

Pokud zadáme 2 hodnoty, první označuje šířku vodorovných hran (horní a dolní), druhá hodnota označuje šířku svislých hran (levá a pravá):

border-image-width: 30px 1em;

Když zadáme 3 hodnoty, první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní:

border-image-width: 30px 1em 1cm;

Hodnoty můžeme zadat samozřejmě i 4 a nastavit takto šířku všech hran rámečku zvlášť:

border-image-width: 30px 1em 1cm 6mm;

Hodnoty

  • číslo jednotka - Výchozí hodnota je 1px. Číslo může být libovolné a jednotka také (tedy taková, která existuje v CSS 3 - cm, mm, px, em, ...)
  • procenta - Šířka vyjádřená procenty u kraje obrázku. Nedoporučuji však nastavovat procenty stejnou hodnotu pro všechny strany, protože je to velmi matoucí a nejasné.
  • auto - Šířka obrázkového rámečku se nastaví automaticky (tedy na rozměry obrázku).
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na 1px).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Vytvořme si div o rozměrech 300px × 100px, který bude mít obrázkový rámeček se šířkou 15px. Na rámeček použijeme následující obrázek:

Obrázkový rámeček - Rámeček - CSS vlastnosti
<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                       border-image: url('ramecek.png') 30;
                       border-image-width: 15px;
                       width: 300px;
                       height: 100px;
                }
                </style>
                <title>border-image-width</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost border-image-width v CSS 3 - Rámeček - CSS vlastnosti

Srovnání s atributem border-width

Rozdíl mezi těmito 2 atributy je ten, že border-image-width by se měl převážně používat na rámečky s obrázkem. Tento atribut má však jednu nevýhodu a to tu, že svým obrázkem zasahuje do vnitřku elementu. Pokud bychom chtěli zachovat předešlé hodnoty a nezasahovat do obsahu, hodí se nám více border-width.

Zkusme si prohodit v minulé ukázce tyto 2 vlastnosti. Změna jde docela dobře znát. Definování šířky rámečku po změně bude vypadat následovně:

border-width: 15px;

Výsledek:

Srovnání šířek rámečku - Rámeček - CSS vlastnosti

Poznámka: atribut border-image-width podporují pouze novější prohlížeče. Podpora u IE je až ve verzi 11.

Více nastavení obrázkového rámečku najdete u vlastnosti border-image.


 

Všechny články v sekci
Rámeček - CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity