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;