CSS border-image 基础知识

Question

很简单的东西，但是我不明白问题是什么。

在 ASP.Net 网页中，我想创建一个带有特定边框的 div。

CSS:

.ResourcesDiv
{
border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg) 30 30 stretch;
border: 15px solid transperant;
width: 300px;
padding: 10px 20px;
margin: 50px;
}

HTML/ASP:

<div id="Resources" class="ResourcesDiv">
In the future, this will display the amount of herbs the user has.<br />
In the future, this will display the amount of gems the user has.<br />
</div>

编辑：如果我删除边框的 transperant 部分而不是图像，它会显示黑色边框，尽管我很确定 url 设置正确。

Answer 1

好吧，首先你有一个拼写错误

border: 15px solid transperant;

透明这个词

其次，我想你想要的就在这里fiddle：（特定边界，来自你提到的url）

演示

http://jsfiddle.net/kq950cvv/

Answer 2

见fiddle

我已经将你的CSS修改如下

CSS

.ResourcesDiv {
    border-image:url("http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg") 30 30 stretch;
    border: 15px solid url("http://blogrope.com/wp-content/uploads/2013/06/003-wood-melamine-subttle-pattern-background-pat.jpg") 30 30 stretch;
    width: 300px;
    padding: 10px 20px;
    margin: 50px;
}

试试吧..

更新

检查 fiddle——在 chrome 和 firefox

中测试

CSS border-image 基础知识

CSS border-image basic stuff

html

css

border

演示

见fiddle