Question

似乎我必须阅读每篇文章和指南，使用网络上的边框图像，并尝试了几乎所有可能的建议，但它仍然没有显示！它的目的地是ul的类“navbox”，该元素的完整CSS在下面。

ul.navbar {
    float: right;
    list-style-type: none;
    background-color: #F8F8F8;
    border-style: solid;
    border-width: 4px;
    border-color: #231F20;
    color: #1F1F1F;
    margin: 25px 5px 5px 5px;
    height: 50px;
    position: absolute;
    left: 450px;
    right: 20px;
    vertical-align:middle;
    border-image-source: url(C:\Users\imamadmad\Documents\Web Stuff\Locomotion Coffee\border.png);
    border-image-outset:4px;
        border-image-width:4px;
    border-image-slice:8;
    border-image-repeat:repeat;
}

我觉得我已经尝试了border-image属性的所有可能组合，甚至同时使用了.png和.jpg版本的文件，但没有显示任何内容。我甚至完全删除了其他边框样式，但是当它没有使边框图像出现时更换它，因为我仍然需要某种边框！我不确定这是否与我通过计算机而不是通过网络调用整个文档和与之关联的所有文件这一事实有关，因为我需要自己做一个模拟计算机才可以上网。但是，包括其他图像在内的所有其他内容都显示得很好。它既没有在Chrome中显示也没有在IE中显示，而且Firefox根本不想显示任何CSS，所以这没有用。我已经尝试将-webkit-等标签添加到属性中，但它们也没有任何区别，此外，它不应该用于我正在运行的最新版本的Chrome。

拜托，任何人都可以帮助我！虽然它对设计来说并不重要，但它确实会让眼睛看起来更容易。

Answer 1

工作正常。检查您的图片url

<强> FIDDLE DEMO

ul {
    float: right;
    list-style-type: none;
    background-color: #F8F8F8;
    border-style: solid;
    border-width: 4px;
    border-color: #231F20;
    color: #1F1F1F;
    margin: 25px 5px 5px 5px;
    height: 50px;
    position: absolute;
    left: 450px;
    right: 20px;
    vertical-align:middle;
    border-image-source: url(http://i46.tinypic.com/10gljba.jpg);
    border-image-outset:2px;
    border-image-width:4px;
    border-image-slice:8;
    border-image-repeat:repeat;
}

希望这就是你要找的东西

编辑：FIDDLE已更新

边境图像让我发疯

1 个答案: