CSS：边框只有一半作品

-1

我正在使用CSS创建一个围绕内容的边框，但只有角落图像显示，而不是重复的顶端或底部。CSS：边框只有一半作品

.blog { 
-moz-border-image: url(divborder.png) 30 27 27 repeat; 
-webkit-border-image: url(divborder.png) 30 27 27 repeat; 
-o-border-image: url(divborder.png) 30 27 27 repeat; 
border-image: url(divborder.png) 30 27 27 fi; 
color: #000; 
background-color: #FFF; 
border-top-width: 30px; 
border-right-width: 30px; 
border-bottom-width: 30px; 
border-left-width: 30px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid;

}

任何想法，为什么它可能无法正常工作？我想不出任何事情。感谢您的阅读！

编辑：

这里是我使用的图像：

我使用标准div标签将其添加到我的HTML。

设法解决IT THANKYOU使用：

border-style: solid; 
border-width: 27px; 
-moz-border-image: url(divborder.png) 27 stretch; 
-webkit-border-image: url(divborder.png) 27 stretch; 
-o-border-image: url(divborder.png) 27 stretch; 
border-image: url(divborder.png) 27 stretch;

不知道什么是错的最后一个，干杯！

来源

2014-02-17 user3286723

只是一个提示：另外发布在jsfiddle.net创建的演示可以帮助很多这样的问题。 – Matthew

为什么你不使用这个短的：border：30px solid #FFF; –

不要以为有一个属性叫fi。也许你的意思是fill？

border-image: url(divborder.png) 30 27 27 fill;

来源

2014-02-17 18:41:25 Will

谢谢，但没有运气 – user3286723

这也许？

border-image: url(divborder.png) 30 27 27 fill repeat;

也只是一个建议，这里是一个精简的格式，因为你的边框宽度和样式是统一的。

.blog { 
    -moz-border-image: url(divborder.png) 30 27 27 repeat; 
    -webkit-border-image: url(divborder.png) 30 27 27 repeat; 
    -o-border-image: url(divborder.png) 30 27 27 repeat; 
    border-image: url(divborder.png) 30 27 27 fill repeat; 
    color: #000; 
    background-color: #FFF; 
    border-width: 30px; 
    border-style: solid; 
}

来源

2014-02-17 18:42:21 jonsuh

没有运气对不起，我正在使用

加载它。有没有反对把div放入div的规则？ – user3286723

奇数，似乎正常使用您的图像作为例子。 http://codepen.io/anon/pen/FJDLB – jonsuh

CSS：边框只有一半作品

回答

相关问题