Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - více informací.
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í.
java week + discount 50

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

Pomocí CSS 3 vlastnosti border-image nastavíme obrázek jako rámeček okolo HTML elementu. Jedná se o shrnující vlastnost, ve které nastavujeme několik vlastností obrázkového rámečku. Vlastnost není prohlížeči plně podporována ani dobře zdokumentována.

Ukázka

Použijme následující obrázek, který obsahuje rohy a strany:

Obrázek rámečku pro CSS vlastnost border-image
<!DOCTYPE html>
<html>
        <head>
                <style>
                #kontejner
                {
                        border-image: url('obrazek_ramecku.png') 30 30 repeat;
                        border-width: 20px;
                        width: 300px;
                        height: 100px;
                }
        </style>
        </head>
        <body>
                <div id="kontejner">

                </div>
        </body>
</html>

Výsledek:

Ukázka obrázkového rámečku přes CSS

Zkusme si ještě obrázek pokrývající strany neopakovat, ale roztahovat:

border-image: url('obrazek_ramecku.png') 30 30 stretch;

Výsledek:

Ukázka obrázkového rámečku přes CSS

Více příkladů najdete u samostatných vlastností, viz. výše. Další nastavení rámečku naleznete u vlastnosti border.


 

Všechny články v sekci
Rámeček - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře

Avatar
kuba.skoda
Člen
Avatar
kuba.skoda:3.11.2013 16:44

Ahoj, tady bude asi chybka, v obou příkladech je stretch.. v prvním má být repeat nebo? :)

 
Odpovědět
3.11.2013 16:44
Avatar
kuba.skoda
Člen
Avatar
kuba.skoda:3.11.2013 16:51

Aha tak už jsem to zahlíd na jiné stránce ... round v prvním případě :)

 
Odpovědět
3.11.2013 16:51
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na kuba.skoda
David Čápka:19.11.2013 11:55

Díky, opravil jsem to :)

Odpovědět
19.11.2013 11:55
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
jozef.stropko:28.1.2015 17:48

Namiesto border-width, nemá byť náhodou border-image-width. Pri border-width mi nezobrazovalo rámček, pri border-image-width už áno. Ďakujem za odpoveď.

 
Odpovědět
28.1.2015 17:48
Avatar
Odpovídá na David Čápka
Jan Jedlička:29.7.2017 22:09

Dobrý večer, omlouvám se, že otravuji s takovou blbosti. Snažil jsem se vytvořit z obrázku rámování a i přes zadání co tu píšete se mi nezobrazuje rám.nevite čím to může být? Dekuji

 
Odpovědět
29.7.2017 22:09
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jan Jedlička
David Čápka:29.7.2017 23:57

To může mít více příčin, typicky špatně uvedená cesta k obrázku nebo starý prohlížeč.

Odpovědět
29.7.2017 23:57
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Avatar
Jan Jedlička:29.7.2017 23:58

mohu vam zaslat obrazek jak to mam nastavene?

 
Odpovědět
29.7.2017 23:58
Avatar
Jan Jedlička:29.7.2017 23:59

obrazek mam vlozen primo ve slozce kde je i html a css soubor

 
Odpovědět
29.7.2017 23:59
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 8 zpráv z 8.