html - 边框图像让我发疯

标签 html css

看来我一定已经阅读了网络上的每篇文章和使用边框图像的指南,并且尝试了几乎所有可能的建议,但它仍然没有显示!它被指定为类“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

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 更新

关于html - 边框图像让我发疯,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25421039/

相关文章:

html - 如何获取有效的 HTML 或 Markdown 前 300 个字符?

javascript - 如何使复选框用作多选选项?

html - 我的图像不会显示,但会显示背景颜色

CSS 菜单下拉对齐问题

jquery - 简单的 z-index 在我的案例中没有像我预期的那样工作

javascript - 如何在克隆元素上应用事件?

jquery - 如何关闭弹出窗口

html - 无法在 CSS 中使用背景颜色

html - 移动设备扭曲了我网站上的页面

css 错误 - 仅适用于 iPhone 6/7/8 的图片库剪切的 div - flex 和网格