border-image - Český CSS 3 manuál
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:
<!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:
Zkusme si ještě obrázek pokrývající strany neopakovat, ale roztahovat:
border-image: url('obrazek_ramecku.png') 30 30 stretch;Výsledek:
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
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.
Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Komentáře
Člen
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! :)
Zobrazeno 8 zpráv z 8.