看来我一定已经阅读了网络上的每篇文章和使用边框图像的指南,并且尝试了几乎所有可能的建议,但它仍然没有显示!它被指定为类“navbox”的 ul,该元素的完整 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 不需要它。
拜托,任何人都可以帮助我!虽然它对设计来说并不重要,但它确实会让眼睛看起来更轻松。
最佳答案
工作正常。检查你的图片 url
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 更新
关于html - 边框图像让我发疯,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25421039/