Изображение верхней границы в CSS3

Я использовал 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 />)

Ответы

Ответ 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/

Ответ 2

Существует свойство border-image-width: a b c d;. Подробности:

  • a-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" ) и применяет его как верхнюю границу с нужной шириной.

Ответ 3

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

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

Ответ 4

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

Подробнее см. w3.org