边框图像不显示

Question

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

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>

Answer 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/

Answer 2

您必须指定边框样式

.border {
    border-image: url('border.png') 25% round;
    border-style: solid;
}