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 - Rámeček - CSS vlastnosti

<!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 - Rámeček - CSS vlastnosti

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.

Článek pro vás napsal Jan Lupčík

Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.

Aktivity