CSS свойство border-bottom-image не работает?

Question

Вот мой код CSS:

.header-text {
   -moz-border-bottom-image: url('images/tour_tab_border.gif') 27 27 27 27 stretch stretch;
   -webkit-border-bottom-image: url('images/tour_tab_border.gif') 27 27 27 27 stretch stretch;
   -o-borderbottom-image: url('images/tour_tab_border.gif') 27 27 27 27 stretch stretch;
 }

И мой HTML-код:

<div>
  <h1 class="header-text" >let's Knockout Poverty in India!</h1>
</div>

Почему мое изображение границы не отображается?

Answer 1

На самом деле я не вижу, есть ли свойство -moz-border-bottom-image, вам, вероятно, нужно -moz-border-image.Он позволяет вам задать ширину границы, чтобы вы могли сделать что-то вроде

-moz-border-image: url('images/tour_tab_border.gif') 0 0 27 0 stretch stretch;

, если вам нужна только нижняя граница, и то же самое для всех других свойств.

Answer 2

Затем вы можете скрыть верхнюю, правую и левую границы, используя:

    border: 3px solid transparent;
    -webkit-border-image: url('images/tour_tab_border.gif') 27 27 27 27 stretch stretch; /* Safari 5 */
    -o-border-image: url('images/tour_tab_border.gif') 27 27 27 27 stretch stretch; /* Opera */
    border-image: url('images/tour_tab_border.gif') 27 27 27 27 stretch stretch;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;