CSS边框图像在Chrome中不起作用

我使用CSS

边框图像

在菜单栏中获得了一定的效果。它在Firefox中运行良好。但在Chrome中不起作用

看。chrome有什么解决办法吗

CSS

nav.mainMenu{
width:@16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
    width:100%; height:50px; overflow: visible;
    background: url('../imgs/gun_metal.png');
    border-radius: 15px; box-shadow: 0px 3px 3px @dark;

    li{
        float:left; width: auto;
        margin: 0 20px; overflow: visible;
        height: 80px; position:relative; top:-15px;
        a{
            width: auto; height: auto;
            float:left; padding: 0 15px;
            font-family: @sansSec;
            color:@light;
            line-height: 80px;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 3px 3px 3px @dark;
        }
    }
    li.active, li:hover{
        background: @primary;
        border-radius: 15px 0 15px 15px;
        border-image:url(../imgs/menu_active_bg.png);   
        border-image-width:15px 15px 0px 0px;
        border-image-outset: 0px 15px;
    }
}

像下面这样尝试一下

li.active, li:hover{
background: @primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}

---

在像这样设置图像之前，请尝试设置边框

border: 50px solid transparent;

我注意到，在Safari中，这句话并不重要，但在chrome中却很重要

Blink将开始需要边框样式来绘制边框图像。这一直是规范所要求的，但尚未强制执行。为了不受此更改的影响，请在使用边框图像的位置添加例如“边框样式：实体”

所以加上

border-style:solid;

---

应该可以解决您的问题。

此webkit仅适用于边界半径。但我需要边界图像。比较firefox和chorme中的菜单是否有差异。看起来“-webkit border image”也可能存在，我将其添加到了答案中。尝试添加

-webkit外观：无-webkit边框图像宽度：和-webkit边框图像开始：未被chromelook识别，我已添加图像。这就是我需要它的方式。相同的结果，没有变化。我通过chrome开发工具登录了你的网站，它显示的很好。不知道你在哪里检查。我在本地检查。我会再试一次。看问题，我已经添加了图片。这就是我需要它的原因。是的，Chrome51在这里修复了一个bug：这为我修复了它——两年多后！谢谢这实际上破坏了我在Safari中的
边框图像。明显
边框颜色：透明优先于
边框图像源
。但是在
border图像源代码之前设置
border:50px solid
似乎对Safari和Chrome都很有效。
border-style:solid;