CSS border-image无法在Chrome中运行

Question

我已使用CSS border-image在菜单栏中获得某些效果。它在Firefox中运行良好。但是在Chrome中不起作用。

见www.imptools.com。是否有针对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;
    }
}

Answer 1

在设置图像之前尝试设置边框

border: 50px solid transparent;

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

Answer 2

li.active, li:hover{
    background: @primary;
    border-radius: 15px 0 15px 15px;
    -webkit-border-radius: 15px 0 15px 15px;
    -moz-border-radius: 15px 0 15px 15px;
    -khtml-border-radius: 15px 0 15px 15px;
    border-image:url(../imgs/menu_active_bg.png);   
    -webkit-border-image:url(../imgs/menu_active_bg.png);   
    -moz-border-image:url(../imgs/menu_active_bg.png);   
    -khtml-border-image:url(../imgs/menu_active_bg.png);   
    border-image-width:15px 15px 0px 0px;
    -webkit-border-image-width:15px 15px 0px 0px;
    -moz-border-image-width:15px 15px 0px 0px;
    -khtml-border-image-width:15px 15px 0px 0px;
    border-image-outset: 0px 15px;
    -webkit-border-image-outset: 0px 15px;
    -moz-border-image-outset: 0px 15px;
    -khtml-border-image-outset: 0px 15px;
}

Answer 3

尝试如下。

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;
}

Answer 4

根据chrome platform status，

  

眨眼将开始需要边框样式才能绘制边框图像。规范始终要求这样做，但尚未强制执行。为了不受此更改的影响，请添加例如使用边框图像的'border-style：solid'。

因此添加

border-style:solid;

应该解决您的问题。