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/

Answer 2

我认为这是因为您没有指定高度，因此顶部和底部边框彼此重叠，如果您添加诸如 200px 之类的高度，它们将被分开，并且 div 的内容将位于它们之间.

希望对您有所帮助。

Answer 3

来源：http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp

您的问题可能是因为您使用了重复，我建议“拉伸”。我无法运行您的 JSFiddle，但我认为这是问题所在。

祝你好运，让我们知道它是否有效。

试试这个：

#section2border {

    border-top: 30px solid;
  -moz-border-image:url("http://s15.postimg.org/lthkrrwkr/border_paper_top.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("http://s15.postimg.org/lthkrrwkr/border_paper_top.png") 30 30 repeat; /* Safari */
  -o-border-image:url("http://s15.postimg.org/lthkrrwkr/border_paper_top.png") 30 30 repeat; /* Opera */
  border-image:url("http://s15.postimg.org/lthkrrwkr/border_paper_top.png") 30 30 repeat;
    width:100%;
    background:none;
}

JSFiddle：http://jsfiddle.net/tzcS3/3/

如果你只想要上面说的边框，只需将“border”更改为“border-top”