Border изображение не отображается

Я использую код границы изображения что-то вроде этого, но это не работает:Border изображение не отображается

CSS:

#container{ 
    float:left; 
    position:absolute; 
    font-size:56px; 
    font-family:arial; 
    top:400px; left:200px; 
    border-bottom-image:url(images/border_bg.png); 
    -webkit-border-image:url(images/border_bg.png) 30 30 round; 
    -o-border-image:url(images/border_bg.png) 30 30 round; 
    border-image:url(images/border_bg.png) 30 30 round;" 
}

HTML:

<div id="container">WE'VE GOT YOU COVERED.</div>

источник

2013-09-18 BigTech

ссылки взять из этого ... http://css-tricks.com/understanding-border-image/ – SaurabhLP

Я думаю, что ваш код работает см. мою скрипку http://jsfiddle.net/wKymx/ просто скопировал ваш код и сделал абсолютное изображение для теста – markvicencio

ОК, так как это не работает и какие браузеры вы тестируете? –

You имеют некоторые синтаксические ошибки.

Вот рабочий пример:

#container { 
    font-size:56px; 
    font-family:arial; 
    border-width: 50px; 
    border-style: solid; 
    border-image: url(http://placekitten.com/100/100) 25% round; 
}

Вы должны установить ширину границы и стиль, чтобы создать пространство для границы изображения, чтобы появиться.

См ссылка: http://www.w3.org/TR/css3-background/#border-images

См демо по адресу: http://jsfiddle.net/audetwebdesign/JdEkB/

источник

2013-09-18 11:05:08

Border изображение не отображается

ответ

Смежные вопросы