html - border-image 属性不显示边框

Question

我遵循了 W3Schools here 的例子

HTML:

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

CSS:

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

我还包含了所有供应商前缀，即使最新的 Chrome 可以很好地解释它。

我没有收到任何控制台错误，所以我的文件已找到并加载没有问题。

不过，与 W3School 上的示例不同，我没有得到任何边框图像。

我显然错过了什么

我注意到 W3Schools 上的示例没有使用像素大小，我尝试添加它们但没有帮助。

JSFiddle

Answer 1

翻转样式的顺序:

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

jsFiddle Demo