border-image属性不显示边框

Question

I've followed the example off of W3Schools here 我在这里遵循了W3Schools的示例

HTML: HTML：

<h2 class="underline_red">Design</h2>

CSS: CSS：

.underline_red {
    border-image: url(../images/underline_red.jpg) 30 30 stretch;
    border: 15px solid transparent;
}

I've also included all the vendor prefixes even though the latest Chrome interprets it just fine. 即使最新的Chrome浏览器也很好，我也提供了所有供应商前缀。

I don't get any console errors, so my file is located and loaded no problem. 我没有收到任何控制台错误，因此可以找到并加载我的文件。

Unlike the example on W3Schools though, I'm not getting any border-image. 与W3Schools上的示例不同，我没有得到任何边框图像。

I'm obviously missing something 我显然遗失了一些东西

I've noticed the example on W3Schools doesn't use pixel sizes, I tried adding them but it didn't help. 我注意到W3Schools上的示例不使用像素大小，我尝试添加它们，但没有帮助。

Answer 1

Flip the order of your styles: 翻转样式的顺序：

.underline_red {
    border: 15px solid transparent;
    border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 round;
}