边框图片不显示答案

【问题标题】：Border image not displaying边框图片不显示
【发布时间】：2013-09-18 19:05:52
【问题描述】：

我正在使用类似这样的边框图像代码，但它不起作用：

CSS：

#container{
    float:left;
    position:absolute;
    font-size:56px;
    font-family:arial;
    top:400px; left:200px;
    border-bottom-image:url(images/border_bg.png);
    -webkit-border-image:url(images/border_bg.png) 30 30 round; 
    -o-border-image:url(images/border_bg.png) 30 30 round;
    border-image:url(images/border_bg.png) 30 30 round;"
}

HTML：

<div id="container">WE'VE GOT YOU COVERED.</div>

【问题讨论】：

参考这里...css-tricks.com/understanding-border-image
我认为您的代码正在运行，请参阅我的小提琴jsfiddle.net/wKymx 刚刚复制了您的代码并制作了绝对图像以供测试
好的，那它是怎么不工作的，你在什么浏览器上测试？
表示边框图片不显示，我使用的是谷歌浏览器。

标签： html css image border

【解决方案1】：

你有一些语法错误。

这是一个工作示例：

#container {
    font-size:56px;
    font-family:arial;
    border-width: 50px;
    border-style: solid;
    border-image: url(http://placekitten.com/100/100) 25% round;
}

您需要设置边框宽度和样式，以便为边框图像创建一些空间。

见参考：http://www.w3.org/TR/css3-background/#border-images

查看演示：http://jsfiddle.net/audetwebdesign/JdEkB/

【讨论】：