CSS：边界只有一半的作品

Question

我正在使用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中。

使用以下方式管理以修复它：

   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;

不知道最后一个出了什么问题，欢呼！

Answer 1

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

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

Answer 2

这或许？

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;
}