Předvánoční slevová akce Java týden
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

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

Unicorn College 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-outset nastavujeme, jak daleko od obsahu divu má být obrázkový rámeček. Vlastnost se dědí.

Syntaxe

Atribut border-image-outset můžeme deklarovat několika způsoby. Pokud zadáme jen jednu hodnotu, nastaví se tato hodnota pro všechny čtyry strany.

border-image-outset: 5px;

Pokud zadáme 2 hodnoty, první označuje vodorovné hrany (horní a dolní), druhá hodnota označuje svislé hrany (levá a pravá):

border-image-outset: 5px 10px;
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Když zadáme 3 hodnoty, první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní:

border-image-outset: 5px 10px 1;

Hodnoty můžeme zadat samozřejmě i 4 a nastavit takto všechny hrany rámečku zvlášť:

border-image-outset: 5px 10px 1 3;

Hodnoty

  • 0 (výchozí) - Rámeček bude natěsnaný u divu.
  • číslo - Samostatné číslo bez žádné jednotky. Pokud bychom si to chtěli přepočítat na pixely, máme zde následující rovnici: délka * hodnota atributu border-width = x px.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na 0).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Samozřejmě, že se zde dají uvést všechny jednotky, které v CSS 3 existují. Uvést je však všechny by bylo vyčerpávající.

Nezapomeňte, že rámeček je okraj elementu. Pokud tedy nastavíte příliš velkou hodnotu, aby byl rámeček co nejdále, bude zasahovat do ostatních elementů. Vyvarovat se tím můžete nastavením atributu margin.

Ukázka

Vyzkoušejme si to v praxi. Vytvoříme si div o velikosti 300px × 50px s hodnotou atributu padding na 15px. Rámeček bude mít šířku 20px a bude vzdálen od elementu 10px. Obrázek rámečku, který roztáhneme, bude vypadat následovně:

Obrázek rámečku
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                div
                {
                       border-image: url('ramecek.png') 30;
                       border-width: 20px;
                       border-image-outset: 10px;
                       width: 300px;
                       height: 50px;
                       padding: 15px;
                }
                </style>
                <title>border-image-outset</title>
        </head>
        <body>
                <div>
                    Tento div využívá hodnoty border-image-outset, aby ohraničení
                    bylo o 10px dál, než jsou rozměry divu včetně jeho paddingu.
                </div>
        </body>
</html>

Výsledek:

Vlastnost border-image-outset v CSS 3

Poznámka: atribut border-image-outset 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.


 

 

Manuál pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitního módu TruckersMP.
Všechny články v sekci
Rámeček - CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Matúš Petrofčík:12.7.2015 11:28

Hneď mi to pripomenulo toto: http://www.w3schools.com/…ef/tryit.asp?…
Ale aspoň je to česky a v modrej :D :D

Odpovědět
12.7.2015 11:28
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Matúš Petrofčík
Jan Lupčík:12.7.2015 11:31

Já jsem použil obrázek odsud (je též použit u atributu border-image). :)

Odpovědět
12.7.2015 11:31
TruckersMP vývojář
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Matúš Petrofčík
David Čápka:12.7.2015 11:35

Jediné co je tam podobné je obrázek toho rámečku, který web který jsi ty zmínil sebral stejně jako my z oficiální dokumentace W3 konsorcia - http://www.w3.org/…-background/#…

Odpovědět
12.7.2015 11:35
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
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na David Čápka
Matúš Petrofčík:12.7.2015 12:17

Veď v poriadku :) Obrázok mi pripomenul práve ten web, a je fajn že tieto informácie sú česky.

Odpovědět
12.7.2015 12:17
obsah kocky = r^2 ... a preto vlak drnká
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.