Изображение верхней границы в 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 />)

 George Reith12 июн. 2012 г., 14:17
@thirtydot это перспективно до 6000 года
 Dean12 июн. 2012 г., 14:15
Да, это прекрасно работает.
 thirtydot12 июн. 2012 г., 14:13
Вам действительно не нужна такая большая точность в вашемfont-size.

Ответы на вопрос(4)

Another SOLUTION  - создать визуальный"BEFORE" псевдоэлемент:

.yourDiv::before{
    background:url("http://lorempixel.com/200/100/");
    width:100%;
    height:20px;
}
 20 мар. 2017 г., 16:48
Вы правы, это решение лучше, спасибо, что поделились.

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

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

 12 июн. 2012 г., 14:25
Это ответ?
 22 июн. 2012 г., 21:58
Это был ... странный ... способ ответить на комментарий MotaBOS, Ecko. Не делай этого. Оставьте ответ в комментарии, если у вас есть представитель для этого.
 23 июн. 2012 г., 22:20
Я понимаю. Используйте комментарий, чтобы ответить (например, у меня здесь), а не ваш ответ.
 22 июн. 2012 г., 22:11
Я не ответил ни на что отрицательным образом. Я имел в виду ответ на поставленный выше вопрос о границе.

Здесьborder-image-width: a b c d; имущество. Детали:

a-d are the widths of the top, right, bottom and left borders, respectively values of a-d may be in the form: [x]px [x] - multiples of border-width value [x]% - percent of the image slice (appears non-working in Safari 7) auto - derive from the width of the corresponding image slice the default value is 1. if you omit d, the value of b is used for the left border width if you also omit c, the value of a is also used for the bottom border width if you also omit b, the value of a is used for all borders :)

Итак, для вашего примера вы можете использовать:

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

 10 июл. 2015 г., 19:05
border-image-width: 100% 0 0 0; дроидов, которых я искал.
Решение Вопроса

Я не думаю, что есть такая собственность, как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/

 Dean12 июн. 2012 г., 14:25
Спасибо, работает хорошо.
 05 янв. 2016 г., 04:18
На самом деле эта скрипка не работает на Firefox 43 ...
 16 мая 2016 г., 17:57
Это не работает в Firefox. Я запустил это на iPad через IonicFramework & amp; Apache Cordova и он тоже не работает. Это работает на Chrome, хотя.

Ваш ответ на вопрос