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

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

Pomocí CSS 3 vlastnosti border-image-source nastavujeme adresu k obrázku rámečku. Vlastnost se dědí.

Hodnoty

  • none (výchozí) - Rámeček nemá žádný obrázek.
  • url(adresa) - Cesta k obrázku na rámeček.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Vytvoříme si obyčejný div o rozměrech 300px × 100px se šířkou rámečku 10px a s hodnotou atributu border-image-slice na 30. Rámeček bude používat obrázek ramecek.png:

Obrázkový rámeček
<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                       border-image-source: url('ramecek.png');
                       border-image-slice: 30;
                       border-width: 10px;
                       width: 300px;
                       height: 100px;
                }
                </style>
                <title>border-image-source</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost border-image-source v CSS 3

Minulý zápis rámečku je poměrně dlouhý. Můžeme si ho však zkrátit. Použijeme k tomu atribut border-image:

border-image: url('ramecek.png') 30;
border-width: 10px;

Poznámka: atribut border-image-source podporují pouze novější prohlížeče. Podpora u IE je až ve verzi 11.

Více nastavení obrázkového rámečku najdete u vlastnosti border-image.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Rámeček - CSS vlastnosti

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!