2014-09-17 2 views
0

Я пытаюсь использовать новые пограничные изображения CSS3. Я создал границу изображения, чтобы обернуть вокруг моего контента, но я не могу растянуть ее полностью по моему содержанию, которое она только сидит в углы.CSS3 Пограничное изображение strech

border-style: solid; 
border-width: 29px 27px; 
-moz-border-image: url(http://i.imgur.com/oi4vSoL.png) 29 27 repeat; 
-webkit-border-image: url(http://i.imgur.com/oi4vSoL.png) 29 27 repeat; 
-o-border-image: url(http://i.imgur.com/oi4vSoL.png) 29 27 repeat; 
border-image: url(http://i.imgur.com/oi4vSoL.png) 29 27 fill repeat; 
border-image-outset: 17px; 

Я создал скрипку - http://jsfiddle.net/aLuzqtxg/

+0

Вы можете сделать эту конкретную границу без изображения - только с границами и, возможно, немного коробчатого тени –

ответ

1

следующим образом: http://www.w3schools.com/cssref/css3_pr_border-image.asp Вы должны изменить «повторить» на «круглый» и сделать срез изображения/размер и границы ширина меньше отл. 19 17

border-style: solid; 
 
border-width: 19px 17px; 
 
-moz-border-image: url(http://i.imgur.com/oi4vSoL.png) 19 17 round; 
 
-webkit-border-image: url(http://i.imgur.com/oi4vSoL.png) 19 17 round; 
 
-o-border-image: url(http://i.imgur.com/oi4vSoL.png) 19 17 round; 
 
border-image: url(http://i.imgur.com/oi4vSoL.png) 19 17 round; 
 
border-image-outset: 17px;

+0

Спасибо, у меня были проблемы с получением голову круглый нарезка и т.д .. – Sam

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