边框图像CSS的奇怪行为

Question

我有一个图像,我想用作div的边框和背景.下面的代码(和小提琴)在div内部产生不希望的白色背景,尽管使用background: transparent !important;或background: none !important;(我试过两个).

这是我正在使用的图像:

这是我得到的效果:

这是我想要的效果:

奇怪的是,我可以通过在Chrome中打开Web Inspector并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的文本内容是动态的).

Answer 1

你缺少fill关键字:标准说:

'fill'关键字(如果存在)会导致保留border-image的中间部分.(默认情况下,它被丢弃,即视为空.)

看到更新的小提琴:写作30 30 fill似乎解决了你的问题.