Question

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

编辑**

好的，我发现，有没有办法让它如此边框图像只在div的上半部分？我也不希望它在底部。

/编辑**

这是我的代码。 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

来源：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-top”

Answer 3

我认为这是因为你没有指定高度，所以顶部和底部边框相互重叠，如果你添加一个高度，如200px，它们将被分开，div的内容将介于它们之间

希望有所帮助。

Div正在获得双重图像边框 - 为什么？

3 个答案: