CSS的border-image属性出现奇怪的行为

Question

我有一张图片，想要用作div的边框和背景。下面的代码（以及fiddle）会产生不良的白色背景，尽管使用background: transparent !important;或background: none !important;（我都试过）。

这是我要使用的图像：

这是我得到的效果：

这是我想要的效果：

奇怪的是，在Chrome中打开Web检查器并在页面渲染后切换border-image属性，我可以实现所需的效果。只需关闭然后重新打开border-image即可获得想要的结果：

HTML

<div>test</div>

CSS

div {
    -webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */
    border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round;
}

如果浏览器可以渲染它，为什么我不能写呢？ :) 任何帮助/建议都将不胜感激。

请注意，我已经尝试将图像设置为div的background-image而不是border-image，但这也没有产生期望的结果（缩放图像以防止边框被截断太难了，因为div的文本内容是动态的）。

- cassidymack

Answer 1

您缺少“fill”关键字：根据标准：

“如果存在'fill'关键字，则会保留边框图像的中间部分。(默认情况下，它被丢弃，即被视为空。)”

请参见更新的fiddle：编写“30 30 fill”似乎可以解决您的问题。

- Ulrich Schwarz

---

非常感谢您的回答，以及提醒我们再次检查规格！ :) - cassidymack

我知道有时候规格说明可能会让人感到害怕，但有时候它们也能解决你的问题 :) - Ulrich Schwarz

Answer 2

这个对你有用吗？http://jsfiddle.net/qazLuyxh/9/

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 40px;
    width: 520px;
    height: 320px;
    background: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) no-repeat;
    color: #FFB9B9;
    font: bold 24px/41px'fontname', Helvetica, sans-serif !important;
    background-size: 100%;
}

- user4191014

---

使用background-image路径的问题是底部的一些边框会被裁剪掉。在fiddle中的尺寸仅用于演示目的。实际高度将因内容而自适应。 - cassidymack

Answer 3

JSFiddle - 点击这里

也许这会对你有所帮助。只是瞎猜。

#block {
background-image: url("http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png");
height: 100%;
width: 450px;
background-repeat: no-repeat;
}


#block .blocktext {
padding: 50px;
}

- NickyTheWrench