css 边界图像未显示

kkih6yb8  于 2023-11-19  发布在  其他
关注(0)|答案(2)|浏览(133)

我正在使用像这样的边框图像代码,但它不工作:

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>

bis0qfac

bis0qfac1#

你有一些语法错误。
下面是一个工作示例:

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

jogvjijk

jogvjijk2#

您必须指定边框样式

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

字符串

相关问题