html - 边框图像不显示

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/