Top Border Image в CSS3

Question

Я использовал border, border-top-image, border-image и никто, кажется, не делает то, что мне нужно.

У меня есть следующие CSS:

#footer { 
    overflow: hidden; 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
    padding: 26px 0 30px 0; 
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg'); 
    font-size: 0.8461538461538462em; 
    color: #aaa; 
} 

Это, кажется, не распространяются на веб-сайте я пытаюсь работать, я попытался ее в Firefox и Chrome.

Я только хочу, чтобы изображение появилось на верхней границе и не хочу иметь никаких других границ (так это вроде как <hr />)

Answer 1

Я не думаю, что любое такое свойство, как border-top-image дать изображение границы с любой стороны элемента - Использование

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round; 

но дают границы вокруг всех сторон. Чтобы удалить рамку вокруг остальных сторон я дал -

border-bottom:0; 
border-left:0; 
border-right:0; 

Он работал и вот моя скрипка - http://jsfiddle.net/ashwyn/c7WxG/1/

Answer 2

Граница изображение определяется как URI, для двух различных групп: УИР ДО три изображения могут быть указаны для каждого из четырех границ границы. Если задан один URI изображения, первый фрагмент центрируется на границе. Если указаны два URI изображения, они встречаются в центре пограничной линии с первым изображением, расположенным на верхней или левой стороне центра. Если заданы три URI изображения, второй становится центром и не разбивается. Остальные два расположены по обе стороны от центрального изображения, причем первое происходит на верхней или левой стороне центра, а третье - внизу или справа.

Более обратитесь w3.org

Answer 3

Существует border-image-width: a b c d; свойство. Детали:

• a-d являются ширины верхней, правой, нижней и левой границ, соответственно
• значения объявления могут быть в форме:
  • [x]px
  • [x] - кратные границы - значение ширины
  • [x]% - процент фрагмента изображения (отображается нерабочим в Safari 7)
  • auto - выводится из ширины соответствующего среза изображения
• Значение по умолчанию: 1.
• если опустить d значение b используется для левой границы ширина
• если вы также опустить c, значение a также используется для нижней границы ширины
• если вы также опустить b, то значение a используется для всех границ :)

Так для примера вы можете использовать:

border-image-width: 100% 0 0 0; 

В качестве альтернативы border-image сокращённого свойства включает в себя border-image-width в качестве параметра, так что в одной строке CSS:

border-image: url(image.png) 100% 0 0 0/[desired_border_width]px 0 0 0 repeat; 

Это использует все изображение для верхнего среза («100% 0 0 0») и применяет его как верхняя граница с требуемой шириной.

Answer 4

Другой РЕШЕНИЕ - создать визуальный "ДО" phseudo-элемент:

.yourDiv::before{ 
    background:url("http://lorempixel.com/200/100/"); 
    width:100%; 
    height:20px; 
}