Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

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

HTML a CSS Manuál Rámeček border-image - Český CSS 3 manuál

Unicorn College ONEbit hosting 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 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.


 

 

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Rámeček - CSS vlastnosti
Aktivity (1)

 

 

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
jozef.stropko
Člen
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
Jan Jedlička
Člen
Avatar
Odpovídá na David Čápka
Jan Jedlička:29. července 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. července 22:09
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jan Jedlička
David Čápka:29. července 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. července 23:57
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jan Jedlička
Člen
Avatar
Jan Jedlička:29. července 23:58

mohu vam zaslat obrazek jak to mam nastavene?

 
Odpovědět 29. července 23:58
Avatar
Jan Jedlička
Člen
Avatar
Jan Jedlička:29. července 23:59

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

 
Odpovědět 29. července 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.