html - CSS border-image 属性不显示

Question

我在使用 CSS border-image 属性时遇到一些问题。 CSS如下:

    footer#footer {
background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
background-color: #cccccc;
border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
-moz-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
-webkit-border-image: url(http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png);
border-image-width: 100% 0 0 0;
-moz-border-image-width: 100% 0 0 0;
-webkit-border-image-width: 100% 0 0 0;
}

我在页脚本身有一个图像，它似乎覆盖了为边框设置的区域。

我尝试将其应用到的网站如下:http://bramcroft.co.uk/

我想要棕色页脚上方的边框。

如有任何帮助，我们将不胜感激!

Answer 1

你可以通过更改所需的边框大小来尝试这个

border:10px;
background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
background-color: #cccccc;
border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;
-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;
-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/paws-border.png") 30 30;