Halloweenská akce! Na stránce s dobitím bodů zadej dole kód STRASIDELNYCH20 a získej porci +20% bodů zdarma!
Akce končí 31.10. o půlnoci.

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 sítě 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
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
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.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
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Jan Jedlička
Člen
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
Člen
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.