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;

CSS属性border-bottom-image不起作用？

2 个答案: