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

HTML a CSS Manuál Rámeček 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
<!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

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

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.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Rámeček - CSS vlastnosti

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!