Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Test obrázkového rámečku border-image</title> <div class="box"> <h1>Test obrázkového rámečku <code>border-image</code></h1> <h2><code>round</code></h2> <p>Box s ozdobným obrázkovým rámečkem, rohy perfektně navazují.</p> </div> <div class="box repeat"> <h2><code>repeat</code></h2> <p>Rámeček se může opakovat.</p> </div> <div class="box stretch"> <h2><code>stretch</code></h2> <p>Rámeček se může roztáhnout.</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.box { margin: 1em 0; padding: 0 .5em; border: 13px solid #000; -o-border-image: url(http://jecas.cz/files/border-image/ozdobny.png) 13 round; -webkit-border-image: url(http://jecas.cz/files/border-image/ozdobny.png) 13 round; -moz-border-image: url(http://jecas.cz/files/border-image/ozdobny.png) 13 round; border-image: url(http://jecas.cz/files/border-image/ozdobny.png) 13 round; overflow: auto; resize: both; } .repeat { -o-border-image: url(http://jecas.cz/files/border-image/ozdobny.png) 13 repeat; -webkit-border-image-repeat: repeat; -moz-border-image-repeat: repeat; border-image-repeat: repeat; } .stretch { -o-border-image: url(http://jecas.cz/files/border-image/ozdobny.png) 13 stretch; -webkit-border-image-repeat: stretch; -moz-border-image-repeat: stretch; border-image-repeat: stretch; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>