синтаксис изображения границы создает перекошенное изображение

Я не понимаю синтаксис CSS-функции border-image.

Следующий CSS работает, чтобы создать границу в правильном месте и по ширине, но само изображение сильно перекошено. Он не растянут (как в свойстве CSS), а сжат или какой-то другой мод, который я не совсем понимаю.

#page-header{
border-style: solid;
border-width: 0px 0px 30px;
-moz-border-image: url(test.png) 0 0 30 0 round;
-webkit-border-image: url(test.png) 0 0 30 0 round;
-o-border-image: url(test.png) 0 0 3 0 round;
border-image: url(test.png) 0 0 30 0 fill round;
}

Само изображение представляет собой простой кельтский узел, который я хочу воспроизвести одной строкой в ​​нижней части заголовка страницы, что означает «округление» или «повторение» по оси x, но без преобразования или повторения по оси y.


css border-image
person kvk    schedule 17.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш код для изображения границы выглядит по-разному в разных префиксах браузера.

Попробуйте следующее:

#page-header{
    border-style: solid;
    border-width: 0px 0px 30px;
    -webkit-border-image: url(test.png) 0 0 30 0 round;
       -moz-border-image: url(test.png) 0 0 30 0 round;
         -o-border-image: url(test.png) 0 0 30 0 round;
            border-image: url(test.png) 0 0 30 0 round;
}
person l3fty    schedule 17.03.2017
comment
Хм... это ничего не изменило. Я предполагаю, что что-то происходит вдоль оси Y, но могу ошибаться. - person kvk; 17.03.2017