html - 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

参见 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 中测试