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-repeat - Český CSS 3 manuál

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;

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 - Rámeček - CSS vlastnosti
<!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 - Rámeček - CSS vlastnosti

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 - Rámeček - CSS vlastnosti

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.


 

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