html - Div 有双图像边框 - 为什么？

Question

好的，我的 <div> 遇到了这个问题当我添加我的图像边框时，它会将图像放在那里，并在高度上加倍。这就是我的问题。我只希望它按宽度重复。这可能很简单，但我对这些边框图像还是陌生的。

编辑**

好吧，我想通了，有没有办法让边框图像只出现在 div 的上半部分？我也不希望它位于底部。

/编辑**

JSFiddle - http://jsfiddle.net/tzcS3/

这是我的代码。 CSS

#section2border {
    border: 30px;
  -moz-border-image:url("images/border-paper-top.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("images/border-paper-top.png") 30 30 repeat; /* Safari */
  -o-border-image:url("images/border-paper-top.png") 30 30 repeat; /* Opera */
  border-image:url("images/border-paper-top.png") 30 30 repeat;
    width:100%;
    background:none;
}

HTML

<div id="section2border">
</div>

就这么简单，只是我无法让它工作...提前致谢!

Answer 1

要回答您编辑过的问题，只需更改

#section2border {
    border: 30px solid;
}

到

#section2border {
    border-top: 30px solid;
}

现在只有顶部边框会出现

http://jsfiddle.net/raunakkathuria/tzcS3/5/