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

HTML a CSS Manuál Rámeček 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.


 

  Aktivity (1)

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

 

 

Komentáře

Avatar
kuba.skoda
Člen
Avatar
kuba.skoda:

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:

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ě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:

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
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 4 zpráv z 4.