November Black Friday C# týden
BlackFriday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C#

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Pomocí CSS 3 vlastnosti border-image-repeat nastavujeme, jestli se bude obrázkový rámeček opakovat. Vlastnost se dědí.

Syntaxe

Atribut border-image-repeat můžeme deklarovat několika způsoby. Pokud zadáme jen jednu hodnotu, nastaví se stejná hodnota pro všechny čtyři strany.

border-image-repeat: repeat;

Pokud zadáme 2 hodnoty, první označuje vodorovné hrany (horní a dolní), druhá hodnota označuje svislé hrany (levá a pravá):

border-image-repeat: repeat stretch;
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

border-image-repeat: repeat stretch round;

Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit všechny hrany rámečku zvlášť:

border-image-repeat: repeat stretch round round;

Hodnoty

  • stretch (výchozí) - Obrázek rámečku se roztáhne kolem elementu.
  • repeat - Obrázek se opakuje, aby zaplnil celý prostor.
  • round - Rámeček se opakuje tak, aby zaplnil celý prostor, ale nebyl nikde oříznutý (může se tedy i trochu roztáhnout).
  • space - Obrázek se opakuje a pokud nezaplní celou plochu, ke konci se vloží mezera (velmi podobné hodnotě repeat).
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na stretch).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Vyzkoušejme si to na divu s rozměry 300px × 100px, který bude mít rámeček se šířkou 20px a hodnota atributu border-image-repeat round. Na rámeček použijeme následující obrázek:

Obrázek rámečku
<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                       border-image: url('ramecek.png') 30;
                       border-width: 20px;
                       border-image-repeat: round;
                       width: 300px;
                       height: 100px;
                }
                </style>
                <title>border-image-repeat</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost border-image-repeat v CSS 3

Můžeme si také nastavit 2 hodnoty. Zápis atributu border-image-repeat upravíme tak, aby na vodorovných hranách byla hodnota round a na svislých stretch.

border-image-repeat: round stretch;

Výsledek:

border-image-repeat se 2 hodnotami

Poznámka: atribut border-image-repeat 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.


 

 

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

 

 

Komentáře

Avatar
Aleš Maršíček:13.7.2015 13:49

Co znamená zde parametr 30?

border-image: url('ramecek.png') 30;
 
Odpovědět
13.7.2015 13:49
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Aleš Maršíček
Jan Lupčík:13.7.2015 13:56

Mělo by to být popsané u vlastnosti border-image, která je uvedena na konci článku. :)
Pokud tam není, jedná se o vlastnost border-image-slice.

Odpovědět
13.7.2015 13:56
TruckersMP vývojář
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.

Zobrazeno 2 zpráv z 2.